Flutter web 垂直标签导航答案

【问题标题】：Flutter web vertical tab navigationFlutter web 垂直标签导航
【发布时间】：2021-02-07 19:05:31
【问题描述】：

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

【问题讨论】：

查看NavigationRail 小部件。

标签： flutter flutter-layout flutter-web

【解决方案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"),
        ));
  }

结果如下所示：

【讨论】：