flutter - 同时颤动底部和垂直导航选项卡

Question

我想使用 Flutter 创建一个带有垂直和底部导航选项卡的屏幕，我测试了 2 种方法：

• 第一个是制作底部和顶部选项卡，然后旋转顶部使其垂直，结果是垂直选项卡填满整个屏幕。
• 第二个是使用带有vertical_tabs包的底部导航，在这种情况下我无法使用底部标签进行导航

标签： flutterflutter-layout

Answer 1

这是执行此操作的一种方法。我不确定这是否是最好的方法，但它有效。在底部，我使用的是 BottomNavigationBar，而对于垂直我使用的是 TabBar（您可以选择其他任何内容或您自己的自定义视图）。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  var _bottomBarIndex = 0;
  String title = "Screen 0";
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(initialIndex: 0, length: 3, vsync: this);
    _tabController.addListener(() {
      switch (_tabController.index) {
        case 0:
          {
            setState(() {
              title = "Profile";
            });
            break;
          }
        case 1:
          {
            setState(() {
              title = "Done";
            });
            break;
          }
        case 2:
          {
            setState(() {
              title = "DashBoard";
            });
            break;
          }
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          RotatedBox(
            quarterTurns: 1,
            child: TabBar(
              controller: _tabController,
              tabs: <Widget>[
                getItem(
                  icon: Icon(
                    Icons.person,
                    color: Colors.black,
                  ),
                  text: Text(
                    "Profile",
                    style: TextStyle(color: Colors.black),
                  ),
                ),
                getItem(
                  icon: Icon(
                    Icons.done,
                    color: Colors.black,
                  ),
                  text: Text(
                    "Done",
                    style: TextStyle(color: Colors.black),
                  ),
                ),
                getItem(
                  icon: Icon(
                    Icons.dashboard,
                    color: Colors.black,
                  ),
                  text: Text(
                    "Dashboard",
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: NewScreen(
              title: title,
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _bottomBarIndex,
        onTap: (index) {
          setState(() {
            _bottomBarIndex = index;
            title = "Screen $index";
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('Add')),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text('Search')),
        ],
      ),
    );
  }

  Widget getItem({Icon icon, Text text}) {
    return RotatedBox(
      quarterTurns: -1,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[icon, text],
      ),
    );
  }
}

class NewScreen extends StatelessWidget {
  const NewScreen({this.title});

  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          title,
          style: TextStyle(color: Colors.black, fontSize: 20.0),
        ),
      ),
    );
  }
}