Flutter：如何将 Drawer Header 宽度设置为最大？
Flutter: How to set Drawer Header width to the max?
我正在我的应用程序中添加 Drawer，并关注 official guideline。我想把抽屉分成三个部分：
抽屉Header（在顶部）
一些项目
设置（底部）
如果我有 ListView 作为 Drawer 的直接 child 那么它工作正常，但我无法添加 Settings 部分在底部。我发现 ，它符合我的要求，但 DrawerHeader 不占用最大宽度。
这是我的代码:
Drawer(
elevation: 1.5,
child: Column(children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.redAccent,
)),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
//list tiles
],
)),
Container(
color: Colors.black,
width: double.infinity,
height: 0.1,
),
Container(
padding: EdgeInsets.all(10),
height: 100,
child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
])),
默认情况下，抽屉 Header 宽度不是最大宽度。它根据内容大小进行调整，如果我增加字体大小或在左侧和右侧添加填充，那么它需要更多的宽度。
查看下图以供参考：
[
InkWell(
onTap: () => debugPrint("home Page"),
child: ListTile(
title: Text("Home Page"),
leading: Icon(Icons.home,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("My Account"),
child: ListTile(
title: Text("My Account"),
leading: Icon(Icons.person,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("My Orders"),
child: ListTile(
title: Text("My Orders"),
leading: Icon(Icons.shopping_basket,color: Colors.red,),
),
),
InkWell(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> new ))
},
child: ListTile(
title: Text("Shopping cart"),
leading: Icon(Icons.shopping_cart,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("Favorite"),
child: ListTile(
title: Text("Favorite"),
leading: Icon(Icons.favorite,color: Colors.red,),
),
),
Divider(color: Colors.black,indent: 10.0,endIndent: 58.0,),
InkWell(
onTap: () => debugPrint("Setting"),
child: ListTile(
title: Text("Favorite"),
leading: Icon(Icons.settings,color: Colors.green,),
),
),
InkWell(
onTap: () => debugPrint("Help"),
child: ListTile(
title: Text("Help"),
leading: Icon(
Icons.help,
color: Colors.blue,
),
),
),
],
),
),
尝试将 DrawerHeader 更改为下面给出的内容
DrawerHeader(
padding: EdgeInsets.all(0),
child: Container(
color: Colors.redAccent,
),
),
我做了一个这样的
Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: new Color(0xFF0062ac),
),
accountName: Text("Marcelo Augusto Elias"),
accountEmail: Text("Matrícula: 5046850"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? new Color(0xFF0062ac)
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Alternar Matrícula"),
leading: new Image.asset(
"assets/images/icon_alterna_matricula.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
dense: true,
title: Text("Contracheque"),
leading: new Image.asset(
"assets/images/icon_contracheque.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AutorizacaoEmprestimos()),
);
},
dense: true,
title: Text("Autorização"),
leading: new Image.asset(
"assets/images/icon_autorizacao.png",
width: 20.0,
),
),
ListTile(onTap: (){
},
dense: true,
title: Text("Gráficos/Relatórios"),
leading: new Image.asset(
"assets/images/icon_grafico.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Consignações"),
leading: new Image.asset(
"assets/images/icon_consignacao.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
),
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
),
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
ListTile(onTap: (){
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
我更新了代码，抽屉是这样的：
Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment
.spaceBetween, // place the logout at the end of the drawer
children: <Widget>[
Flexible(
child: ListView(
shrinkWrap: true,
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: myColour,
),
accountName: Padding(
child: Row(
children: <Widget>[
Text("Marcelo Augusto Elias"),
IconButton(
icon: Icon(
Icons.edit,
color: whiteColour,
),
onPressed: () {},
),
],
),
padding: EdgeInsets.only(top: 10),
),
accountEmail: Text("N° Cartão: XXXX XXXX XXXX 5154"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? myColour
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Fatura"),
leading: new Image.asset(
"assets/images/icon_fatura_barra_menu.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Fatura()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Extrato"),
leading: new Image.asset(
"assets/images/icon_barra_menu_extrato.png",
width: 20.0,
),
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DesbloquearPrimeiraVia()),
);
},
dense: true,
title: Text("Desbloquear Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_desbloquearcartao.png",
width: 24.0,
),
),
ListTile(
dense: true,
title: Text("Meu Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_meucartao.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Adiantamento Salarial"),
leading: new Image.asset(
"assets/images/icon_barra_menu_adiantamentosalarial.png",
width: 20.0,
),
),
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
), */
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
), */
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
],
),
),
ListTile(
onTap: () {
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
你必须在 ListView 下面放一个 ListTile，在 Flexible 里面放一个 ListView
我正在我的应用程序中添加 Drawer，并关注 official guideline。我想把抽屉分成三个部分：
抽屉Header（在顶部）
一些项目
设置（底部）
如果我有 ListView 作为 Drawer 的直接 child 那么它工作正常，但我无法添加 Settings 部分在底部。我发现 DrawerHeader 不占用最大宽度。
这是我的代码:
Drawer(
elevation: 1.5,
child: Column(children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.redAccent,
)),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
//list tiles
],
)),
Container(
color: Colors.black,
width: double.infinity,
height: 0.1,
),
Container(
padding: EdgeInsets.all(10),
height: 100,
child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
])),
默认情况下，抽屉 Header 宽度不是最大宽度。它根据内容大小进行调整，如果我增加字体大小或在左侧和右侧添加填充，那么它需要更多的宽度。
查看下图以供参考：
[
InkWell(
onTap: () => debugPrint("home Page"),
child: ListTile(
title: Text("Home Page"),
leading: Icon(Icons.home,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("My Account"),
child: ListTile(
title: Text("My Account"),
leading: Icon(Icons.person,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("My Orders"),
child: ListTile(
title: Text("My Orders"),
leading: Icon(Icons.shopping_basket,color: Colors.red,),
),
),
InkWell(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> new ))
},
child: ListTile(
title: Text("Shopping cart"),
leading: Icon(Icons.shopping_cart,color: Colors.red,),
),
),
InkWell(
onTap: () => debugPrint("Favorite"),
child: ListTile(
title: Text("Favorite"),
leading: Icon(Icons.favorite,color: Colors.red,),
),
),
Divider(color: Colors.black,indent: 10.0,endIndent: 58.0,),
InkWell(
onTap: () => debugPrint("Setting"),
child: ListTile(
title: Text("Favorite"),
leading: Icon(Icons.settings,color: Colors.green,),
),
),
InkWell(
onTap: () => debugPrint("Help"),
child: ListTile(
title: Text("Help"),
leading: Icon(
Icons.help,
color: Colors.blue,
),
),
),
],
),
),
尝试将 DrawerHeader 更改为下面给出的内容
DrawerHeader(
padding: EdgeInsets.all(0),
child: Container(
color: Colors.redAccent,
),
),
我做了一个这样的
Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: new Color(0xFF0062ac),
),
accountName: Text("Marcelo Augusto Elias"),
accountEmail: Text("Matrícula: 5046850"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? new Color(0xFF0062ac)
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Alternar Matrícula"),
leading: new Image.asset(
"assets/images/icon_alterna_matricula.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
dense: true,
title: Text("Contracheque"),
leading: new Image.asset(
"assets/images/icon_contracheque.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AutorizacaoEmprestimos()),
);
},
dense: true,
title: Text("Autorização"),
leading: new Image.asset(
"assets/images/icon_autorizacao.png",
width: 20.0,
),
),
ListTile(onTap: (){
},
dense: true,
title: Text("Gráficos/Relatórios"),
leading: new Image.asset(
"assets/images/icon_grafico.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Consignações"),
leading: new Image.asset(
"assets/images/icon_consignacao.png",
width: 20.0,
),
),
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
),
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
ListTile(onTap: (){
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
),
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
ListTile(onTap: (){
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
我更新了代码，抽屉是这样的：
Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment
.spaceBetween, // place the logout at the end of the drawer
children: <Widget>[
Flexible(
child: ListView(
shrinkWrap: true,
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: myColour,
),
accountName: Padding(
child: Row(
children: <Widget>[
Text("Marcelo Augusto Elias"),
IconButton(
icon: Icon(
Icons.edit,
color: whiteColour,
),
onPressed: () {},
),
],
),
padding: EdgeInsets.only(top: 10),
),
accountEmail: Text("N° Cartão: XXXX XXXX XXXX 5154"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? myColour
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Fatura"),
leading: new Image.asset(
"assets/images/icon_fatura_barra_menu.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Fatura()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Extrato"),
leading: new Image.asset(
"assets/images/icon_barra_menu_extrato.png",
width: 20.0,
),
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DesbloquearPrimeiraVia()),
);
},
dense: true,
title: Text("Desbloquear Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_desbloquearcartao.png",
width: 24.0,
),
),
ListTile(
dense: true,
title: Text("Meu Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_meucartao.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Adiantamento Salarial"),
leading: new Image.asset(
"assets/images/icon_barra_menu_adiantamentosalarial.png",
width: 20.0,
),
),
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
), */
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
), */
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
],
),
),
ListTile(
onTap: () {
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
你必须在 ListView 下面放一个 ListTile，在 Flexible 里面放一个 ListView