[英]Flutter: Nested row in column, how to fill row without expanding parent column
这就是我所拥有的:
源代码:
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text('text'),
color: Colors.blue,
),
Container(
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),
),
如何使蓝色和红色容器与绿色容器的宽度相匹配,而又不使它们像绿色容器一样大?
这就是我想要得到的,而不是对行内的容器使用固定的。 此外,我在列中有多个元素,我不想使用固定大小。
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child:
Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child:
Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
),
您只能用 Expanded 小部件包装 Row 的子级。
如果大小是固定的,那么您可以为容器添加一个宽度,该容器与行小部件一起包装。
我给宽度 50 的原因是因为父容器的宽度已经是 100,所以剩余宽度被赋予容器
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
child: Text('text'),
color: Colors.blue,
),
Container(
width: 50,
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),
您可以使用灵活的小部件给行固定宽度
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
child: Row(
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
)
试试这个,你必须将 Exapnded 添加到行小部件的子项中
Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.green,
child: Text('Hdddfhlsd', style: primaryTextStyle()),
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
)
**Replace your container by this **
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 100,
child: Column(
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
),
],
),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.