如何消除DrawerHeader和ListTile之间的空白间隙

huangapple
go评论59阅读模式
英文:

how to eliminate the white space between DrawerHeader and ListTile

问题

要去除DrawerHeader和ListTile之间的空白空间，您可以尝试以下方法：

  1. 在DrawerHeader的child属性中，将Column的mainAxisAlignment和crossAxisAlignment都设置为MainAxisAlignment.center和CrossAxisAlignment.center，以确保内容在垂直和水平方向都居中对齐。

  2. 在ListTile之前或之后添加一个Divider小部件，以创建分隔线，从而在视觉上分隔DrawerHeader和ListTile。

这些更改应该可以帮助您减少DrawerHeader和ListTile之间的空白空间。

英文:

how to remove the white space between DrawerHeader and ListTile

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';


class NavDrawer extends StatelessWidget {
  Map<int, String> myMap = {
    0: '主頁',
    1: '工作資訊',
    2: '個人資料',
    3: '關於我們',
    4: '救生員需知',
    5: '拯溺考試資訊',
    6: '登入',
    7: '登出',
    8: '設置',
    9: '意見',
  };

  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  //check user login
  final bool signedIn = FirebaseAuth.instance.currentUser != null;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&s'),
              ),
            ),
            child: Center( // Updated
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage('https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(myMap[0]!),
            tileColor: selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text(myMap[1]!),
            tileColor: selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(myMap[2]!),
            tileColor: selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text(myMap[3]!),
            tileColor: selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text(myMap[4]!),
            tileColor: selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text(myMap[5]!),
            tileColor: selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          signedIn?
          ListTile(
            leading: Icon(Icons.logout),
            title: Text(myMap[7]!),
            onTap: () => onTileTap(7),
          )
              : ListTile(
            leading: Icon(Icons.login),
            title: Text(myMap[6]!),
            onTap: () => onTileTap(6),
          ),
          Expanded(
            child: Container(),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text(myMap[8]!),
            tileColor: selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(8),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text(myMap[9]!),
            tileColor: selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(9),
          ),
        ],
      ),
    );
  }
}

如何消除DrawerHeader和ListTile之间的空白间隙

答案1

得分: 0

在DrawerHeader中有一个margin属性，默认值为EdgeInsets.only(bottom: 8)，所以你只需分配：

margin: EdgeInsets.zero,

以下是更新后的代码：

class NavDrawer extends StatelessWidget {
  Map<int, String> myMap = {
    0: '主頁',
    1: '工作資訊',
    2: '個人資料',
    3: '關於我們',
    4: '救生員需知',
    5: '拯溺考試資訊',
    6: '登入',
    7: '登出',
    8: '設置',
    9: '意見',
  };

  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  //检查用户是否已登录
  final bool signedIn = true;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            margin: EdgeInsets.zero,
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&s'),
              ),
            ),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage(
                        'https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(myMap[0]!),
            tileColor:
                selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text(myMap[1]!),
            tileColor:
                selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(myMap[2]!),
            tileColor:
                selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text(myMap[3]!),
            tileColor:
                selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text(myMap[4]!),
            tileColor:
                selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text(myMap[5]!),
            tileColor:
                selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          signedIn
              ? ListTile(
                  leading: Icon(Icons.logout),
                  title: Text(myMap[7]!),
                  onTap: () => onTileTap(7),
                )
              : ListTile(
                  leading: Icon(Icons.login),
                  title: Text(myMap[6]!),
                  onTap: () => onTileTap(6),
                ),
          Expanded(
            child: Container(),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text(myMap[8]!),
            tileColor:
                selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(8),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text(myMap[9]!),
            tileColor:
                selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(9),
          ),
        ],
      ),
    );
  }
}

在线检查您的代码：
Zapp.run

提示： 在使用任何小部件之前，务必确保并检查属性，如果在#flutter中遇到任何问题，请专门研究该小部件。

英文:

There's property margin in DrawerHeader which value is by default `

> EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8)

So, you've to just assign

> margin: EdgeInsets.zero,

`Below is the updated code:

class NavDrawer extends StatelessWidget {
Map&lt;int, String&gt; myMap = {
0: &#39;主頁&#39;,
1: &#39;工作資訊&#39;,
2: &#39;個人資料&#39;,
3: &#39;關於我們&#39;,
4: &#39;救生員需知&#39;,
5: &#39;拯溺考試資訊&#39;,
6: &#39;登入&#39;,
7: &#39;登出&#39;,
8: &#39;設置&#39;,
9: &#39;意見&#39;,
};
final int selectedTileIndex;
final Function(int) onTileTap;
NavDrawer({required this.selectedTileIndex, required this.onTileTap});
//check user login
final bool signedIn = true;
@override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: &lt;Widget&gt;[
DrawerHeader(
margin: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
&#39;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&amp;s&#39;),
),
),
child: Center(
// Updated
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(
&#39;https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=a52bbe202f57ac0f5ff7f47166906403&#39;),
),
SizedBox(height: 10),
Text(
&#39;name&#39;,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(height: 5),
Text(
&#39;phone&#39;,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text(myMap[0]!),
tileColor:
selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(0),
),
ListTile(
leading: Icon(Icons.work),
title: Text(myMap[1]!),
tileColor:
selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(1),
),
ListTile(
leading: Icon(Icons.person),
title: Text(myMap[2]!),
tileColor:
selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(2),
),
ListTile(
leading: Icon(Icons.info),
title: Text(myMap[3]!),
tileColor:
selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(3),
),
ListTile(
leading: Icon(Icons.warning),
title: Text(myMap[4]!),
tileColor:
selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(4),
),
ListTile(
leading: Icon(Icons.description),
title: Text(myMap[5]!),
tileColor:
selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(5),
),
signedIn
? ListTile(
leading: Icon(Icons.logout),
title: Text(myMap[7]!),
onTap: () =&gt; onTileTap(7),
)
: ListTile(
leading: Icon(Icons.login),
title: Text(myMap[6]!),
onTap: () =&gt; onTileTap(6),
),
Expanded(
child: Container(),
),
ListTile(
leading: Icon(Icons.settings),
title: Text(myMap[8]!),
tileColor:
selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(8),
),
ListTile(
leading: Icon(Icons.border_color),
title: Text(myMap[9]!),
tileColor:
selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
onTap: () =&gt; onTileTap(9),
),
],
),
);
}
}

Check Online Your Code:
Zapp.run

Tip: Always make sure and check the properties before using any widget and specifically study that widget if you're facing any issue in #flutter

huangapple
  • 本文由 发表于 2023年7月5日 01:12:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/76614710.html
  • drawer
  • flutter
  • listtile
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定