[英]Flutter how to make a row to stick at the bottom
I'm currently working on a card that requires this bar to be at the bottom.我目前正在制作一张要求此栏位于底部的卡片。 But I tried many ways like a scaffold and still can't get it to be at the bottom.
但是我尝试了很多方法像脚手架一样,仍然无法让它在底部。
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Color(0xF6F6F6F6))),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.bookmark_border,
size: 18, color: Colors.black38),
label: Text('Bookmark',
style: TextStyle(
fontSize: 13,
color: Colors.black54)),
onPressed: () {},
),
),
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.share,
size: 18, color: Colors.black38),
label: Text('Share',
style: TextStyle(
fontSize: 13,
color: Colors.black54)),
onPressed: () {},
),
)
])),
)],
You can put the Row in a Column and above the Row you have an Expanded wrapping the widget.您可以将Row放在Column 中,并在Row上方有一个Expanded包裹小部件。 In this case, I used a Container and I set the color to orange.
在这种情况下,我使用了一个容器并将颜色设置为橙色。
class BarStaysDown extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
color: Colors.orange,
),
),
Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.bookmark_border,
size: 18, color: Colors.black38),
label: Text('Bookmark',
style:
TextStyle(fontSize: 13, color: Colors.black54)),
onPressed: () {},
),
),
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.share, size: 18, color: Colors.black38),
label: Text('Share',
style:
TextStyle(fontSize: 13, color: Colors.black54)),
onPressed: () {},
),
)
]
),
)
],
),
),
);
}
}
Try adding crossAxisAlignment: CrossAxisAlignment.end
to the row.尝试将
crossAxisAlignment: CrossAxisAlignment.end
添加到该行。
Hope it helped.希望它有所帮助。
Without more information I am not sure that what I suggest will work.如果没有更多信息,我不确定我的建议是否有效。 But you can use a Stack widget in combination with Align to achieve what you want.
但是您可以将Stack小部件与Align结合使用来实现您想要的效果。 The stack docs with examples, check this article about indexed stacks .
带有示例的堆栈文档,请查看有关索引堆栈的文章。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.