使用行和列在颤振中创建侧边菜单栏答案

【问题标题】：Creating a Side menu bar in flutter using rows and columns使用行和列在颤振中创建侧边菜单栏
【发布时间】：2022-01-12 19:16:37
【问题描述】：

我目前正在使用 Flutter/dart 为基本登录屏幕制作 GUI，并试图了解如何创建屏幕左侧所示的菜单栏。目前我的想法是有一行包含用户名和密码的文本字段，这似乎工作正常。然后使用一列作为侧面的菜单栏。我是使用颤振的新手，并且了解创建基本应用程序的基础知识，但我无法理解是否应该为菜单栏使用列，或者是否有更好的方法。

  class LoginPage extends HookWidget {
  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text(useL10n().loginTitle),
        actions: <Widget> [
          IconButton(
            icon: Icon(
              Icons.bluetooth,

            ), onPressed: () {
          },
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'USERNAME',
                  ),
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'PASSWORD',
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.blue[800], // Should I use a container here to create the menu
                child: Column(
                  ),
                ),
          ],
        ),
      ),
        );
  }
}

我遇到的问题是我在行中有一个嵌套列，所以当我构建和运行代码时它甚至没有显示出来。我只看到用户名和密码的行。

【问题讨论】：

标签： flutter android-studio dart

【解决方案1】：

有一个叫做抽屉的小部件。用它来创建一个抽屉，然后添加你想要的任何小部件。

Scaffold 小部件有一个称为抽屉的属性。将 Drawer() 小部件传递给它。

Scaffold(
  appBar:AppBar(),
  drawer:Drawer(), // this is the attribute for the drawer (left side menu)
  floatingActionButton:FloatingActionButton(),
  body:Container(),
)

这样做会默认在 AppBar 的左侧创建一个菜单按钮。

【讨论】：

抽屉似乎运行良好，我唯一遇到的问题是，如果您单击屏幕上的任意位置，侧边栏就会消失，这不是永久性的。有没有办法永久保留侧栏？
目的是当你在外面点击时它会消失。否则不要使用抽屉，而是使用 stack() 并在左侧放置一个容器，然后在按钮上包含一个单击侦听器以显示或隐藏它。

【解决方案2】：

我认为您的代码是正确的。正如您所包含的，您的代码在列内没有任何内容，因此不会显示。如果你在其中添加任何大小的东西，它就会显示出来。我使用了您的代码并在列中添加了一个 200x200 大小的红色方块：

           Container(
            color: Colors.blue[800], // Should I use a container here to create the menu
            child: Column(
              children: [
                Container(width: 200, height: 200, color: Colors.red,),
              ],
            ),
          ),

看起来像这样：

【讨论】：