Flutter Drawer：删除空白空间答案

【问题标题】：Flutter Drawer: Remove empty spaceFlutter Drawer：删除空白空间
【发布时间】：2020-01-21 13:26:22
【问题描述】：

我在抽屉中实现了一个粘性标题。但现在我在标题和第一个 ListTile 项目之间有一个空白空间。如何删除此空间/将项目设置到标题的末尾？

感谢您的帮助！（我不得不删除一些 ListTiles，因为它对于 stackoverflow 的代码太多）

drawer: Drawer(
  child: Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.85,
            child: DrawerHeader(
          decoration: BoxDecoration(
          gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [Colors.blue, Colors.red])
        ),
        child: Center (child:  Text('Title', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 30.0)),),

            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: ListView(children: [
           ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 1'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
        ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 2'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
        ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 3'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
          ]),
        )
      ],
    ),
    ),

【问题讨论】：

标签： flutter dart navigation-drawer flutter-layout

【解决方案1】：

ListView 具有默认填充。设置listview的padding属性为0，空间就没有了：

drawer: Drawer(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                width: MediaQuery.of(context).size.width * 0.85,
                child: DrawerHeader(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.topRight,
                          end: Alignment.bottomLeft,
                          colors: [Colors.blue, Colors.red])),
                  child: Center(
                    child: Text('Title',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 30.0)),
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: ListView(
                children: [
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 1'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 2'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 3'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                ],
                padding: EdgeInsets.only(top: 0),
              ),
            )
          ],
        ),
      ),

【讨论】：

【解决方案2】：

我想问题出在DrawerHeader。我只会使用带有一些填充的容器。

另一件事可能是您将 DrawerHeader 的 Container 包装在 Expanded 中。 Expanded 将尝试获取所有可用空间。因此，以防万一也尝试使用不同的 FlexFit 移动到 Flexible。

Drawer(
    child: Column(
      children: [

        Container(
          padding: const EdgeInsets.symmetric(vertical: 16),
          width: MediaQuery.of(context).size.width * 0.85,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [Colors.blue, Colors.red])),
          child: Center(
            child: Text(
              'Title',
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                  fontSize: 30.0),
            ),
          ),
        ),
        Expanded(
          child: ListView(children: [
            ListTile(
              leading: Icon(Icons.wb_sunny),
              title: Text('Menu 1'),
              trailing: Icon(Icons.keyboard_arrow_right),
              onTap: () {
                print("Hallo");
              },
            ),

          ]),
        )
      ],

DartPad 这里是最后一个例子。

【讨论】：

【解决方案3】：

将 DrawerHeader 边距设置为 0

...
                  child: DrawerHeader(
                    margin: EdgeInsets.all(0),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topRight,
                            end: Alignment.bottomLeft,
                            colors: [Colors.blue, Colors.red])),
                    child: Center(
                      child: Text('Title', 
...

【讨论】：

【解决方案4】：

用Inkwell 小部件包装您的listTile 小部件，就像这样。它会减少一些空间

     InkWell(
              onTap: () {print("Hello");},
              child: ListTile(
                leading: Icon(Icons.wb_sunny),
                title: Text('Menu 2'),
                trailing: Icon(Icons.keyboard_arrow_right),
              ),
            ),

【讨论】：