Flutter: 理解Stateless/Stateful Widget子布局逻辑及关联RenderObject查找方法

查找组合类Widget对应布局规则的方法 #

StatelessWidget和StatefulWidget属于组合型Widget，本身不直接持有RenderObject，所有渲染逻辑都由其build方法返回的子组件树实现，你可以按以下步骤找到对应的布局规则：

• 第一步：打开目标Widget的源码，定位到它的build方法，梳理它根据参数拼接的子组件树
• 第二步：在子组件树中筛选继承自RenderObjectWidget的组件，只有这类组件会创建对应的RenderObject
• 第三步：查看对应RenderObjectWidget的createRenderObject方法，获取其关联的RenderObject实现类
• 第四步：查看RenderObject类的performLayout方法，即可得到该组件自身的尺寸计算规则、向子组件传递的约束规则

针对你提到的Container场景说明 #

你遇到的Container尺寸不生效问题，以及Container的布局规则可按上述方法验证：

1. 查看Container的build源码可知，它会根据你传入的参数拼接不同的RenderObjectWidget：传入width/height会嵌套ConstrainedBox、传入color会嵌套ColoredBox、传入padding会嵌套Padding等
2. 你示例中根节点的约束是屏幕尺寸的紧约束，即父级强制子级必须填满整个屏幕，此时ConstrainedBox接收到的父级约束优先级高于你传入的width:20/height:20参数，所以最终Container会占满全屏
3. 如果要让你设置的20x20尺寸生效，只需要给Container套一个能提供松约束的父组件，比如Center，此时父级传递的约束是最大宽高为屏幕尺寸，最小为0，你设置的固定尺寸就会生效

额外提示 #

部分常用组合Widget的官方文档会直接标注布局规则，没有文档的情况下按上述步骤走源码即可快速得到准确规则。

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