如何使用 flutter 中的容器创建垂直固定自定义标签栏

Question

我必须创建一个垂直左侧固定垂直条，像这样

我已经使用 TabBar 创建了，但是还有很多额外的工作需要完成。 就像我必须删除它上面的模糊 hover 效果，然后点击 tabBar 项目应该在中心显示其相应的内容，如果内容更多，它应该是可滚动的。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用NavigationRail
您可以更改NavigationRailDestination的icon和selectedIcon
icon和selectedIcon接受widget ，因此您可以根据您的请求使用Column wrap icon和Text
代码片段

    NavigationRail(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        labelType: NavigationRailLabelType.selected,
        destinations: [
          NavigationRailDestination(
            icon: Column(
              children: [Icon(Icons.favorite_border), Text('Button 1')],
            ),
            selectedIcon: Container(
              color: Colors.green,
              child: Column(
                children: [Icon(Icons.favorite_border), Text('Button 1')],
              ),
            ),
            label: Text(""),
          ),
          NavigationRailDestination(
            icon: Column(
              children: [Icon(Icons.bookmark_border), Text('Button 2')],
            ),
            selectedIcon: Column(
              children: [Icon(Icons.book), Text('2 clicked')],
            ),
            label: Text(''),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.star_border),
            selectedIcon: Icon(Icons.star),
            label: Text('Third'),
          ),
        ],
      ),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.selected,
            destinations: [
              NavigationRailDestination(
                icon: Column(
                  children: [Icon(Icons.favorite_border), Text('Button 1')],
                ),
                selectedIcon: Container(
                  color: Colors.green,
                  child: Column(
                    children: [Icon(Icons.favorite_border), Text('Button 1')],
                  ),
                ),
                label: Text(""),
              ),
              NavigationRailDestination(
                icon: Column(
                  children: [Icon(Icons.bookmark_border), Text('Button 2')],
                ),
                selectedIcon: Column(
                  children: [Icon(Icons.book), Text('2 clicked')],
                ),
                label: Text(''),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),
            ],
          ),
          VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Center(
              child: Text('selectedIndex: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}