Flutter Drawer：移除空的 space

Question

我在我的抽屉里安装了一个便签 header。但是现在我在 header 和第一个 ListTile 项之间得到了一个空的 space。我怎样才能删除这个 space / 将项目设置到 header 的末尾？

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

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,),
          ]),
        )
      ],
    ),
    ),

Answer 1

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

另一件事可能是您将 DrawerHeader 的 Container 包装在 Expanded 中。 Expanded 将尝试获取所有可用的 space。因此，以防万一也尝试使用不同的 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 最后一个例子。

Answer 2

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

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

Answer 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', 
...

Answer 4

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

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),
              ),
            )
          ],
        ),
      ),

Flutter Drawer：移除空的 space

Flutter Drawer: Remove empty space

dart

navigation-drawer

flutter

flutter-layout