我有一个行,有两个这样的孩子:
----------------------
| wide child1 | child2 |
----------------------
有没有办法使每个单元格的大小相等,使每个单元格的宽度等于最宽单元格的宽度?像这样:
--------------------------
| wide child1 | child2 |
--------------------------
因此,整个Row的宽度为biggestCellWidth * numOfChildren
。
我无法使用内置的小部件实现这种行为,并试图实现MultiChildLayoutDelegate
,但它也不起作用,因为我不能测量儿童。
更新日期:
// in build function
Container(
height: 48,
child: Material(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(16),
color: Theme.of(context).colorScheme.primary,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// this widgets should be equal in width
_buildButton(
text: "Review",
onTap: _onReviewTap,
),
_buildButton(
text: "Buy",
onTap: _onBuyTap,
),
],
),
),
);
Widget _buildButton({
@required String text,
@required Function onTap,
@required EdgeInsets padding,
}) {
return InkWell(
onTap: onTap,
child: Center(
child: Text(
text,
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
);
}
5条答案
按热度按时间c8ib6hqw1#
将child1和child2 Package 在Expanded中,
xwbd5t1u2#
我想你想要的是一个Table?例如:
ukdjmx9f3#
你提到你所有的孩子都是
Text
小部件。我们可以渲染文本以了解其大小(reference),选择最大宽度并使用MultiChildLayoutDelegate
进行布局。这是一个有点hacky,但将工作:rdrgkggo4#
使用具有相同 flex 值的Expanded可沿着主轴平分空间。在这里你必须了解主轴的要点是什么。我建议仔细阅读这个链接:https://api.flutter.dev/flutter/widgets/Column-class.html
对于“列”小部件,主轴是垂直y轴,而“行”小部件具有水平x轴作为其主轴。您可以检查下面的代码,以了解如何使用扩展。
使用DartPad(https://dartpad.dev/?id)尝试更多示例,了解Expanded的工作原理。
输出:
将上面的“列”替换为“行”,您将得到以下输出:
eivgtgni5#
您可以使用相同的flex编号将Flexible中的每个小部件 Package 起来