Flutter中Drawer内ListView的Align属性失效，无法将Logout置底

我来帮你搞定这个问题～你之前的思路方向是对的，但结构上出了点小问题：你把Expanded直接放在了ListView的children里，而ListView本身是滚动容器，它的子组件并不能通过Expanded来占据剩余空间，自然没法把Logout推到底部。

正确的实现思路 #

我们需要调整Drawer的整体布局结构：

1. 用Column作为Drawer的直接子组件，负责垂直方向的布局
2. 把顶部的UserAccountsDrawerHeader直接放在Column里
3. 用Expanded包裹中间的ListView，让它占据Header和底部Logout之间的所有剩余空间
4. 最后把Logout的ListTile放在Column的最末尾，这样它就会固定在Drawer底部

修改后的完整代码 #

drawer: Drawer(
  child: Column(
    children: <Widget>[
      UserAccountsDrawerHeader(
        decoration: BoxDecoration(color: Colors.black),
        accountName: _userName != null ? Text(_userName) : Container(),
        accountEmail: _userNumber != null ? Text(_userNumber) : Container(),
        currentAccountPicture: CircleAvatar(
          backgroundColor: Theme.of(context).platform == TargetPlatform.iOS ? Colors.blue : Colors.white,
          child: _userName != null ? Text(
            "${_userName[0]}",
            style: TextStyle(fontSize: 40.0, color: Colors.black),
          ) : Container(),
        ),
      ),
      Expanded(
        child: ListView(
          padding: EdgeInsets.all(0.0),
          children: <Widget>[
            InkWell(
              onTap: () {
                print('Home');
                Navigator.pop(context);
              },
              child: ListTile(
                title: Text("Home"),
                leading: Icon(Icons.home, color: Colors.black),
              ),
            ),
            InkWell(
              onTap: () {
                print('My Orders');
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => OrderScreen(Pin: _userPin, Number: _userNumber)
                  )
                );
              },
              child: ListTile(
                title: Text("My Orders"),
                leading: Icon(Icons.fastfood, color: Colors.black),
              ),
            ),
            InkWell(
              onTap: () {
                print('My Address');
              },
              child: ListTile(
                title: Text("My Address"),
                leading: Icon(Icons.location_on, color: Colors.black),
              ),
            ),
            InkWell(
              onTap: () {
                print('My Cart');
                Navigator.pop(context);
              },
              child: ListTile(
                title: Text("My Cart"),
                leading: Icon(Icons.shopping_cart, color: Colors.black),
              ),
            ),
            ListTile(
              title: Text("Help"),
              leading: Icon(Icons.help, color: Colors.black),
            ),
          ],
        ),
      ),
      // 固定在底部的Logout项
      ListTile(
        title: Text("Logout"),
        leading: Icon(Icons.exit_to_app, color: Colors.black),
      ),
    ],
  ),
)

为什么这样能生效？ #

• Column会按垂直方向依次排列子组件
• Expanded会强制中间的ListView占据Column中除了Header和Logout之外的所有可用空间，这样不管中间菜单的内容多少，Logout都会被挤到Drawer的最底部
• 当中间菜单内容过多时，ListView会自动滚动，完全不影响底部Logout的固定位置

内容的提问来源于stack exchange，提问作者dartKnightRises