Dart 将按钮对准抽屉底部
我正在尝试让一个小部件与NavDrawer的底部对齐，同时仍然在抽屉的顶部保留一个DrawerHeader和一个列表。以下是我正在尝试的：Dart 将按钮对准抽屉底部,dart,flutter,Dart,Flutter,我正在尝试让一个小部件与NavDrawer的底部对齐，同时仍然在抽屉的顶部保留一个DrawerHeader和一个列表。以下是我正在尝试的： drawer: new Drawer( child: new Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ new Text('Top'), new Align( alignment: Fr
drawer: new Drawer(
child: new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text('Top'),
new Align(
alignment: FractionalOffset.bottomCenter,
child: new Text('Bottom'),
),
],
),
),
抽屉：新抽屉(
子：新列(
mainAxisSize:mainAxisSize.max，
儿童：[
新文本（“顶部”），
新对齐(
对齐：分馏Loffset.bottomCenter，
子项：新文本（“底部”），
),
],
),
),
底部文本应该与抽屉底部对齐，但不是 您需要将
AlignExpandeddrawer: Drawer(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('Top'),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text('Bottom'),
),
),
],
),
),
抽屉：抽屉(
子：列(
mainAxisSize:mainAxisSize.max，
儿童：[
文本（“顶部”），
扩大(
子对象：对齐(
对齐：对齐.bottomCenter，
子项：文本（'Bottom'），
),
),
],
),
),
@override
Widget build(BuildContext context) {
return Drawer(
// column holds all the widgets in the drawer
child: Column(
children: <Widget>[
Expanded(
// ListView contains a group of widgets that scroll inside the drawer
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(),
Text('In list view'),
Text('In list view too'),
],
),
),
// This container holds the align
Container(
// This align moves the children to the bottom
child: Align(
alignment: FractionalOffset.bottomCenter,
// This container holds all the children that will be aligned
// on the bottom and should not scroll with the above ListView
child: Container(
child: Column(
children: <Widget>[
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings')),
ListTile(
leading: Icon(Icons.help),
title: Text('Help and Feedback'))
],
)
)
)
)
],
),
);
}
@覆盖
小部件构建（构建上下文）{
回程抽屉(
//列保存抽屉中的所有小部件
子：列(
儿童：[
扩大(
//ListView包含一组在抽屉中滚动的小部件
子：ListView(
儿童：[
UserAccountsDrawerHeader（），
文本（“在列表视图中”），
文本（“也在列表视图中”），
],
),
),
//此容器用于保存文件
容器(
//此对齐将子对象移动到底部
子对象：对齐(
对齐：分馏Loffset.bottomCenter，
//此容器包含所有要对齐的子对象
//位于底部，不应与上面的ListView一起滚动
子：容器(
子：列(
儿童：[
分隔符（），
列表砖(
前导：图标（图标.设置），
标题：文本（“设置”），
列表砖(
前导：图标（Icons.help），
标题：文本（“帮助和反馈”）
],
)
)
)
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
DrawerHeader(
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(
color: AppColors.menuHeaderColor,
),
child: buildHeader(),
),
AccountDrawerRow(),
ListTile(
leading: Icon(Icons.directions_car),
title: Text(translations.button.vehicles),
),
ListTile(
leading: Icon(Icons.calendar_today),
title: Text(translations.button.appointments,),
),
],
),
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SettingsPage())),
child: Icon(Icons.settings)),
Icon(Icons.help),
Icon(Icons.info),
],
),
),
),
),
],
),
);
}
看看你的代码有什么问题你已经将一列作为子列添加到抽屉中，因此无论你在抽屉中添加什么，它都是垂直放置的，默认情况下，列的高度会缩小到子列的高度，并且随着子列的增加，列的高度会变大，因此在列中添加对齐没有意义 更简单的解决方案是使用一个扩展小部件，它占用剩余的空间。我使用了一列，并在扩展小部件的上方和下方添加了一个小部件
Drawer(
elevation: 1.5,
child: Column(children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.redAccent,
)),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('My Cart'),
leading: Icon(Icons.shopping_cart),
onTap: () {},
),
ListTile(
title: Text('My Orders'),
leading: Icon(Icons.add_shopping_cart),
onTap: () {},
),
ListTile(
title: Text('Logout'),
leading: Icon(Icons.exit_to_app),
onTap: () {})
],
)),
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),)),
])),
抽屉(
标高：1.5，
子项：列（子项：[
抽屉阅读器(
装饰：盒子装饰(
颜色：Colors.redAccent，
)),
扩大(
子：ListView(
填充：EdgeInsets.zero，
儿童：[
列表砖(
标题：文本（“我的购物车”），
引导：图标（图标、购物车），
onTap:（）{}，
),
列表砖(
标题：文本（“我的订单”），
引导：图标（图标。添加购物车），
onTap:（）{}，
),
列表砖(
标题：文本（“注销”），
前导：图标（图标。退出到应用程序），
onTap:（{}）
],
)),
容器(
颜色：颜色，黑色，
宽度：double.infinity，
高度：0.1，
),
容器(
填充：边缘设置。全部（10），
身高：100，
子项：文本（“V1.0.0”，样式：TextStyle（fontWeight:fontWeight.bold），），
])),
这是我的解决方案，它是一个垂直的
行@override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
DrawerHeader(
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(
color: AppColors.menuHeaderColor,
),
child: buildHeader(),
),
AccountDrawerRow(),
ListTile(
leading: Icon(Icons.directions_car),
title: Text(translations.button.vehicles),
),
ListTile(
leading: Icon(Icons.calendar_today),
title: Text(translations.button.appointments,),
),
],
),
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SettingsPage())),
child: Icon(Icons.settings)),
Icon(Icons.help),
Icon(Icons.info),
],
),
),
),
),
],
),
);
}
@覆盖
小部件构建（构建上下文）{
回程抽屉(
子：列(
儿童：[
扩大(
子：ListView(
儿童：[
抽屉阅读器(
填充：常量边集。全部（7），
装饰：盒子装饰(
颜色：AppColors.menuHeaderColor，
),
子级：buildHeader（），
),
AccountDrawError（），
列表砖(
前导：图标（图标、方向和汽车），
标题：文本（翻译。按钮。车辆），
),
列表砖(
前导：图标（今天的图标、日历），
标题：文本（翻译。按钮。约会，），
),
],
),
),
容器(
子对象：对齐(
对齐：分馏Loffset.bottomCenter，
子：容器(
填充：所有边缘设置（15.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
墨水池(
onTap:（）=>Navigator.of（context.push）（MaterialPage路由）(
生成器：（上下文）=>SettingsPage（）），
子：图标（Icons.settings）），
图标（Icons.help），
图标（Icons.info），
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.baseline,
children: <Widget>[
Text(
'12.00',
style: Theme.of(context).textTheme.headline2,
textAlign: TextAlign.start,
),
Text(
'USD',
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.start,
),
]),