Flutter web 垂直标签导航

Posted 2023-02-23

【中文标题】Flutter web 垂直标签导航

【英文标题】：Flutter web vertical tab navigation

【发布时间】：2021-02-07 19:05:31

【问题描述】：

如何在 Flutter Web 中为仪表板创建垂直选项卡导航，最好的方法是什么？

【问题讨论】：

查看NavigationRail 小部件。

【参考方案1】：

您可以通过NavigationRail 获得此外观。它被添加到今年颤振。它几乎就像底部标签栏一样工作。

【参考方案2】：

我相信您想要与屏幕截图中显示的内容类似的东西吧？

如果是这样，我建议您使用 Scaffold Widget 并使用属性 appBar 和抽屉。

有关脚手架小部件的更多信息，请查看link。

这里是一个简单的例子： 在您的主 Widget 中，像这样修改构建函数。

     @override
  Widget build(BuildContext context) 
    GlobalKey<ScaffoldState> key = GlobalKey();
    return Scaffold(
        key: key,
        drawer: Padding(
          padding: const EdgeInsets.fromLTRB(0, 70, 0, 0),
          child: Container(
              color: Colors.red,
              width: 300,
              child: Column(children: [Text("1"), Text("2"), Text("3")])),
        ),
        appBar: AppBar(
          toolbarHeight: 70,
          elevation: 5,
          centerTitle: true,
          backgroundColor: Colors.black,
          leading: RawMaterialButton(
            child: Icon(Icons.menu),
            onPressed: () => key.currentState.openDrawer(),
          ),
          title: Container(child: Text("Title Widget")),
        ),
        body: Container(
          child: Text("Main Widget"),
        ));
  

结果如下所示：