Question

我在抽屉里装了一个粘头。但是现在我在标头和第一个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,),
          ]),
        )
      ],
    ),
    ),

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

Answer 2

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

另一件事可能是您将DrawerHeader容器包装在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这里是最后一个示例。

Answer 3

用listTile小部件包装Inkwell小部件，如下所示。会减少一些空间

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

Answer 4

将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 个答案: