为 Row 中的所有孩子设置相同的大小

Question

我有一个 Row 有 2 个这样的孩子：

 ----------------------
| wide child1 | child2 |
 ----------------------

有什么方法可以使每个单元格的大小相等，以便每个单元格的宽度等于最宽单元格的宽度？像这样：

 --------------------------
| wide child1 |   child2   |
 --------------------------

所以整个 Row 都会占用biggestCellWidth * numOfChildren宽度。

我无法使用内置小部件实现此行为并尝试实现 MultiChildLayoutDelegate但它也不起作用，因为我无法测量孩子。

更新：

 ----------------------
| wide child1 | child2 |
 ----------------------

Answer 1

将您的 child1 和 child2 包裹在Expanded 中，

Row(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),

Answer 2

我想你想要的是一张桌子？例如：

Table(
  columnWidths: const {
    0: FlexColumnWidth(),
    1: FlexColumnWidth(),
  },
  children: [
    TableRow(
      children: [
        Text(
          "Review",
        ),
        Text(
          "Buy",
        ),
      ]
    ),
  ],
)

Answer 3

你提到你所有的孩子都是Text小部件。我们可以渲染文本以​​了解其大小（参考），选择最大宽度并使用 进行布局MultiChildLayoutDelegate。这有点 hacky，但会起作用：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final texts = [
      Text('loooooooooooong text'),
      Text('short one'),
      Text('one more'),
    ];
    final children = <Widget>[
      for (int i = 0; i < texts.length; i++) 
        LayoutId(
          id: '$_kLayoutKey$i',
          child: Container(
            color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
            child: texts[i],
          ),
        ),
    ];

    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: CustomMultiChildLayout(
          delegate: _CircularLayoutDelegate(texts, 14),
          children: children,
        )
      ),
    );
  }
}

const String _kLayoutKey = 'test';

class _CircularLayoutDelegate extends MultiChildLayoutDelegate {
  _CircularLayoutDelegate(this.texts, this.fontSize);

  final double fontSize;
  final List<Text> texts;

  double _calcTextWidth(BoxConstraints constraints, Text textWidget) {
    RenderParagraph renderParagraph = RenderParagraph(
      TextSpan(
        text: textWidget.data,
        style: TextStyle(
          fontSize: fontSize,
        ),
      ),
      textDirection: TextDirection.ltr,
      maxLines: 1,
    );
    renderParagraph.layout(constraints);
    return renderParagraph.getMinIntrinsicWidth(fontSize).ceilToDouble();
  }

  @override
  void performLayout(Size size) {
    final textSizes = [
      for (final text in texts) 
        _calcTextWidth(BoxConstraints.loose(size), text),
    ];

    final maxWidth = textSizes.fold<double>(0, (p, v) {
      final textWidth = v;
      return textWidth > p ? textWidth : p;
    });

    final textConstraint = BoxConstraints(
      maxWidth: maxWidth,
      minWidth: maxWidth,
      maxHeight: size.height,
    );

    for (int i = 0; i < texts.length; i++) {
      final String childId = '$_kLayoutKey$i';

      if (hasChild(childId)) {
        layoutChild('$_kLayoutKey$i', textConstraint);

        positionChild(
          childId,
          Offset(maxWidth * i, 0),
        );
      }}
  }

  @override
  bool shouldRelayout(_CircularLayoutDelegate oldDelegate) => oldDelegate.texts != texts;
}