Flutter中Column如何感知子Widget尺寸变化并调整其他子组件位置？

相关代码示例 #

class ColorStatefulBox extends StatefulWidget {
  const ColorStatefulBox({Key? key, required this.color}) : super(key: key);
  final Color color;

  @override
  State<ColorStatefulBox> createState() => _ColorBoxState();
}


class _ColorBoxState extends State<ColorStatefulBox> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        count++;
        setState(() {});
      },
      child: Container(
        color: widget.color,
        width: 100+count.toDouble(),
        height: 100+count.toDouble(),
        child: Center(
          child: Text(
            count.toString(),
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
    );
  }
}
class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List<Widget> widgetList = [
    ColorStatefulBox(
      color: Colors.yellow,
      key: GlobalKey(),
    ),
    ColorStatefulBox(
      color: Colors.blue,
      key: GlobalKey(),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("key test"),
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          child: Column(
              children: [...widgetList],),
        ),);
  }
}

核心疑问解答 #

你观察到的现象本质是Flutter中Widget树和RenderObject树分离导致的，具体逻辑如下：

• Widget仅作为配置信息：Column的build方法没触发，是因为它的配置参数（子组件列表、布局属性等）没有发生变化，Widget层面不需要重新构建。但真正负责布局、尺寸计算的是RenderObject，和Widget的build过程是独立的。
• 子组件尺寸变化的通知链：当点击ColorStatefulBox触发尺寸变化时，其内部Container对应的RenderBox会标记自身需要重新布局，并向上传递这个通知，最终到达Column对应的RenderFlex（RenderObject层面的实现）。
• RenderFlex的布局重算：RenderFlex收到子组件的布局变更通知后，会重新执行自身的布局逻辑：重新计算所有子组件的位置，调整其他子Widget的排布，但这个过程完全在RenderObject层进行，不会触发Column的build方法，所以你断点调试时看不到Column的rebuild。

简单来说，Widget树负责描述UI配置，RenderObject树负责实际的布局和绘制，两者的更新机制是分开的——子组件尺寸变化属于RenderObject层的布局调整，不需要触发父Widget的重建。

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