将按钮对齐按钮到抽屉底部

Question

我试图将一个小部件对齐到我的NavDrawer底部，同时仍然在Drawer顶部保留一个DrawerHeader和一个列表。这是我正在尝试的内容：

drawer: new Drawer(
    child: new Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        new Text('Top'),
        new Align(
          alignment: FractionalOffset.bottomCenter,
          child: new Text('Bottom'),
        ),
      ],
    ),
  ),

底部文字应该与抽屉的底部对齐，但它不是！

Answer 1

您需要将Expanded小部件包装在drawer: new Drawer( child: new Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ new Text('Top'), new Expanded( child: new Align( alignment: Alignment.bottomCenter, child: new Text('Bottom'), ), ), ], ), ), 。

Private Sub carrega_empresas()

    Using conexao As MySqlConnection = GetConnectionMySQL()
        conexao.Open()

        Try

            Dim Query As String
            Query = "SELECT * FROM tb_empresa"
            COMMAND = New MySqlCommand(Query, conexao)
            Dim READER As MySqlDataReader
            READER = COMMAND.ExecuteReader
            While READER.Read
                Dim empresa = READER.GetString("empresa")
                cboempresa.Items.Add(empresa)

            End While

            conexao.Close()

        Catch ex As MySqlException

            MessageBox.Show(ex.Message)
        Finally
            conexao.Dispose()

        End Try
    End Using

End Sub

Answer 2

聚会晚了一点，但这是我解决这个问题的方法：

  @override
  Widget build(BuildContext context) {
    return Drawer(
      // column holds all the widgets in the drawer
      child: Column(
        children: <Widget>[
          Expanded(
            // ListView contains a group of widgets that scroll inside the drawer
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(),
                Text('In list view'),
                Text('In list view too'),
              ],
            ),
          ),
          // This container holds the align
          Container(
              // This align moves the children to the bottom
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  // This container holds all the children that will be aligned
                  // on the bottom and should not scroll with the above ListView
                  child: Container(
                      child: Column(
                    children: <Widget>[
                      Divider(),
                      ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Settings')),
                      ListTile(
                          leading: Icon(Icons.help),
                          title: Text('Help and Feedback'))
                    ],
                  )
                )
              )
            )
        ],
      ),
    );
  }

这将产生以下输出，其中UserAccountDrawerHeader和文本项可以在抽屉内部滚动，但是Divider和两个ListTiles在抽屉底部保持静态。

Answer 3

一种简单的方法是像这样使用Spacer()：

Scaffold(
  drawer: Drawer(
    child: Column(
      children: <Widget>[
        Text('Top'),
        Spacer(), // use this
        Text('Bottom'),
      ],
    ),
  )
)

Answer 4

看看您的代码有什么问题，您已经在抽屉中添加了作为子级的列，因此您在其中添加的内容都是垂直放置的，并且默认情况下，列的高度缩小到其子级的高度，并且随着子级的变大得到，因此在Column内添加Align没有任何意义

更简单的解决方案是使用扩展小部件，该部件具有剩余的空间外观。我已经使用了列，并在扩展小部件上方和下方添加了一个小部件。

      Drawer(
            elevation: 1.5,
            child: Column(children: <Widget>[
              DrawerHeader(
                  decoration: BoxDecoration(
                color: Colors.redAccent,
              )),
              Expanded(
                  child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  ListTile(
                    title: Text('My Cart'),
                    leading: Icon(Icons.shopping_cart),
                    onTap: () {},
                  ),
                  ListTile(
                    title: Text('My Orders'),
                    leading: Icon(Icons.add_shopping_cart),
                    onTap: () {},
                  ),
                  ListTile(
                      title: Text('Logout'),
                      leading: Icon(Icons.exit_to_app),
                      onTap: () {})
                ],
              )),
              Container(
                color: Colors.black,
                width: double.infinity,
                height: 0.1,
              ),
              Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
            ])),

Answer 5

这是我对垂直Row的解决方案，它在抽屉的末端带有图标。

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                DrawerHeader(
                  padding: const EdgeInsets.all(7),
                  decoration: BoxDecoration(
                    color: AppColors.menuHeaderColor,
                  ),
                  child: buildHeader(),
                ),
                AccountDrawerRow(),
                ListTile(
                  leading: Icon(Icons.directions_car),
                  title: Text(translations.button.vehicles),
                ),
                ListTile(
                  leading: Icon(Icons.calendar_today),
                  title: Text(translations.button.appointments,),
                ),
              ],
            ),
          ),
          Container(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: Container(
                padding: EdgeInsets.all(15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    InkWell(
                        onTap: () => Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) => SettingsPage())),
                        child: Icon(Icons.settings)),
                    Icon(Icons.help),
                    Icon(Icons.info),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Answer 6

我将其放在一行中，并使用crossAxisAlignment: CrossAxisAlignment.baseline

将所有内容对齐到底部

Row(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.baseline,
              children: <Widget>[
                Text(
                  '12.00',
                  style: Theme.of(context).textTheme.headline2,
                  textAlign: TextAlign.start,
                ),
                Text(
                  'USD',
                  style: Theme.of(context).textTheme.bodyText2,
                  textAlign: TextAlign.start,
                ),
              ]),