Flutter如何让组件宽度隐式匹配另一组件的宽度？

需求：Row组件包含两个子元素，第一个子元素（如Text）宽度由自身内容决定，希望第二个子元素能自动匹配其宽度，效果类似JS中e.style.width = o.offsetWidth。

示例结构：

Row(children: [Text('...'), W])

解决方案1：通过GlobalKey动态获取并同步宽度 #

利用GlobalKey获取第一个组件的渲染尺寸，在组件构建完成后更新第二个组件的宽度：

class WidthSyncRow extends StatefulWidget {
  const WidthSyncRow({super.key});

  @override
  State<WidthSyncRow> createState() => _WidthSyncRowState();
}

class _WidthSyncRowState extends State<WidthSyncRow> {
  final _textKey = GlobalKey();
  double? _textWidth;

  @override
  void initState() {
    super.initState();
    // 组件渲染完成后获取尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = _textKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() => _textWidth = renderBox.size.width);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('自适应宽度的文本内容', key: _textKey),
        if (_textWidth != null)
          SizedBox(
            width: _textWidth,
            child: Container(
              color: Colors.lightBlueAccent.shade100,
              height: 40,
              child: const Center(child: Text('匹配宽度的组件')),
            ),
          ),
      ],
    );
  }
}

解决方案2：用IntrinsicWidth强制宽度统一 #

如果可以接受让所有子组件匹配最宽元素的宽度，直接用IntrinsicWidth包裹Row即可（注意：该组件会增加布局开销，复杂场景慎用）：

IntrinsicWidth(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text('自适应宽度的文本内容'),
      Container(
        color: Colors.lightBlueAccent.shade100,
        height: 40,
        child: const Center(child: Text('匹配宽度的组件')),
      ),
    ],
  ),
)

解决方案3：自定义布局精确控制 #

通过CustomSingleChildLayout实现更灵活的尺寸同步，先测量第一个组件宽度，再约束第二个组件的宽度：

class SyncWidthLayout extends StatelessWidget {
  final Widget firstChild;
  final Widget secondChild;

  const SyncWidthLayout({
    super.key,
    required this.firstChild,
    required this.secondChild,
  });

  @override
  Widget build(BuildContext context) {
    return CustomSingleChildLayout(
      delegate: _SyncWidthDelegate(firstChild: firstChild),
      child: secondChild,
    );
  }
}

class _SyncWidthDelegate extends SingleChildLayoutDelegate {
  final Widget firstChild;

  _SyncWidthDelegate({required this.firstChild});

  @override
  Size getSize(BoxConstraints constraints) {
    final firstSize = firstChild.getSize(constraints);
    return Size(firstSize.width * 2, firstSize.height);
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    final firstSize = firstChild.getSize(constraints);
    return BoxConstraints.tightFor(width: firstSize.width);
  }

  @override
  bool shouldRelayout(_SyncWidthDelegate oldDelegate) {
    return oldDelegate.firstChild != firstChild;
  }
}

// 使用示例
SyncWidthLayout(
  firstChild: const Text('自适应宽度的文本内容'),
  secondChild: Container(
    color: Colors.lightBlueAccent.shade100,
    height: 40,
    child: const Center(child: Text('匹配宽度的组件')),
  ),
)

内容的提问来源于stack exchange，提问作者stackunderflow