Skip to main content

flutter 渲染日记

RenderBox​

RenderBox 是 Flutter 渲染树中最核心的抽象类，代表一个二维矩形盒子（2D Cartesian），是所有具有宽高的渲染对象（如 Container、Row、Column、Text）的基类。

一、核心定位与关系​

  • 继承链：Object → RenderObject → RenderBox
  • 作用：
    • 定义盒模型布局协议（宽高 + 坐标系）
    • 提供布局（Layout）与绘制（Paint）的基础能力
    • 是 Flutter 界面"万物皆盒子"的底层保障

二、关键属性（必懂）​

  • size（Size）：宽高，布局后确定；左上角为 (0,0)，右下角为 (width, height)。
  • constraints（BoxConstraints）：父级传递的约束（minWidth/maxWidth/minHeight/maxHeight），子级必须遵守。
  • parentUsesSize（bool）：布局时标记，为 true 表示父级依赖子级大小（如 Column）；为 false 表示父级不依赖（如 Stack）。

三、核心方法（自定义布局必重写）​

  1. performLayout() 核心布局逻辑：接收 constraints → 计算自身 size → 布局子组件 → 设置子组件位置（offset）。
  2. computeDryLayout(BoxConstraints constraints) "干布局"：仅计算理想 size，不修改状态、不布局子组件，用于父级预计算（如 IntrinsicWidth）。
  3. paint(PaintingContext context, Offset offset) 绘制逻辑：在 offset 位置绘制自身内容（背景、边框、子组件等）。

四、布局流程（重点：约束→大小→位置）​

  1. 父→子：传递约束（Constraints Down）
  2. 子→父：确定大小（Size Up）
  3. 父→子：设置位置（Position Down）

五、常见子类（对应常用Widget）​

  • RenderDecoratedBox → Container
  • RenderFlex → Row/Column
  • RenderParagraph → Text
  • RenderStack → Stack
  • RenderProxyBox → 单容器代理（如 Padding、Align）

六、典型报错与原因（高频）​

  • RenderFlex overflowed：Row/Column 子组件总宽高超出约束
  • RenderBox was not laid out：未调用 layout() 或布局顺序错误
  • BoxConstraints forces an infinite width/height：无界约束导致无法确定大小