如何解决用项目均匀地填充列
我有一个简单的 Column
,里面有 2 个 Containers
和一个 SizedBox
。我只是想让 SizedBox
在它们中间,容器应该填满上面/下面的空间。我可以通过设置 height
来实现这一点,但这不是动态的,它需要动态。
现在的样子:
还有我的code
:
Column(
children: [
// counter_container
Container(
width: detailContainerWidth,height: detailContainerHeight,decoration: Boxdecoration(
color: Colors.green,borderRadius: BorderRadius.only(
topRight: const Radius.circular(cornerRadius),)),),SizedBox(
height: spacingBetweenViews,// price_container
Container(
width: detailContainerWidth,decoration: Boxdecoration(
color: Colors.blue,borderRadius: BorderRadius.only(
bottomright:
const Radius.circular(cornerRadius),)
],)
有没有办法让这个动态而不是设置两个height
的{{1}}?
解决方法
我自己找到了解决方案。让我知道是否有更好的方法来完成这项工作,但我正在工作,所以我现在可以接受:
Flexible(
child: Column(
children: [
// counter_container
Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.green,borderRadius: BorderRadius.only(
topRight:
const Radius.circular(cornerRadius),)),),SizedBox(
height: spacingBetweenViews,// price_container
Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,borderRadius: BorderRadius.only(
bottomRight:
const Radius.circular(cornerRadius),)
],)
,
请注意,Flexible
小部件默认为 FlexFit.loose
。如果您希望绿色和蓝色容器的高度始终相同,而不管它们的内容如何,您应该使用 FlexFit.tight
或 Expanded
小部件。
Expanded
只是 Flexible
和 FlexFit.tight
。 [more info]
使用Flexible
:
使用Expanded
:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,children: [
// counter_container
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.green,borderRadius: BorderRadius.only(
topRight: const Radius.circular(20.0),child:
(Text('HAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\n'))),SizedBox(
height: 8.0,// price_container
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,borderRadius: BorderRadius.only(
bottomRight: const Radius.circular(20.0),)
],);
}
}
注意:我还在您的 crossAxisAlignment: CrossAxisAlignment.stretch
中添加了 Column
,以便您的容器填满屏幕的宽度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。