第4章：布局类组件 —— 4.8 LayoutBuilder、AfterLayout

4.8 LayoutBuilder、AfterLayout

📚 章节概览

本章节是第4章的最后一节，将学习如何在布局过程中动态构建UI，以及如何获取组件的实际尺寸和位置：

• LayoutBuilder - 布局过程中获取约束信息
• BoxConstraints - 约束信息详解
• 响应式布局 - 根据约束动态构建
• AfterLayout - 布局完成后获取尺寸
• RenderAfterLayout - 自定义RenderObject
• localToGlobal - 坐标转换
• Build和Layout - 交错执行机制

---

🎯 核心知识点

LayoutBuilder vs AfterLayout

特性	LayoutBuilder	AfterLayout
执行时机	布局阶段（Layout）	布局完成后（Post-Layout）
获取信息	约束信息（BoxConstraints）	实际尺寸和位置
主要用途	响应式布局	尺寸获取
性能	较好	稍差（额外回调）

---

1️⃣ LayoutBuilder（布局构建器）

1.1 什么是LayoutBuilder

LayoutBuilder 可以在布局过程 中拿到父组件传递的约束信息（BoxConstraints），然后根据约束信息动态地构建不同的布局。

1.2 构造函数

LayoutBuilder({
  Key? key,
  required Widget Function(BuildContext, BoxConstraints) builder,
})

1.3 基础用法

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    // 打印约束信息（调试用）
    print('LayoutBuilder约束: $constraints');
    print('  maxWidth: ${constraints.maxWidth}');
    print('  maxHeight: ${constraints.maxHeight}');
    
    // constraints包含父组件传递的约束信息
    if (constraints.maxWidth > 600) {
      return DesktopLayout();
    } else {
      return MobileLayout();
    }
  },
)

控制台输出示例：

LayoutBuilder约束: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
  maxWidth: 392.7272644042969
  maxHeight: Infinity

1.4 BoxConstraints（约束信息）

class BoxConstraints {
  final double minWidth;   // 最小宽度
  final double maxWidth;   // 最大宽度
  final double minHeight;  // 最小高度
  final double maxHeight;  // 最大高度
  
  bool get isTight;        // 是否为固定约束
  bool get isNormalized;   // 是否标准化
  // ... 更多方法
}

常用属性：

• minWidth / maxWidth：宽度范围
• minHeight / maxHeight：高度范围
• isTight：是否固定尺寸（min == max）
• biggest：最大可用尺寸
• smallest：最小可用尺寸

---

2️⃣ 响应式布局实战

2.1 响应式Column

根据可用宽度动态切换单列/双列布局：

class ResponsiveColumn extends StatelessWidget {
  const ResponsiveColumn({super.key, required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 200) {
          // 最大宽度小于200，显示单列
          return Column(
            children: children,
            mainAxisSize: MainAxisSize.min,
          );
        } else {
          // 大于200，显示双列
          var widgets = <Widget>[];
          for (var i = 0; i < children.length; i += 2) {
            if (i + 1 < children.length) {
              widgets.add(Row(
                children: [children[i], children[i + 1]],
                mainAxisSize: MainAxisSize.min,
              ));
            } else {
              widgets.add(children[i]);
            }
          }
          return Column(
            children: widgets,
            mainAxisSize: MainAxisSize.min,
          );
        }
      },
    );
  }
}

使用示例：

ResponsiveColumn(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
  ],
)

2.2 响应式断点

常见的响应式断点：

enum DeviceType { mobile, tablet, desktop }

DeviceType getDeviceType(double width) {
  if (width < 600) {
    return DeviceType.mobile;    // 手机
  } else if (width < 1200) {
    return DeviceType.tablet;    // 平板
  } else {
    return DeviceType.desktop;   // 桌面
  }
}

// 使用
LayoutBuilder(
  builder: (context, constraints) {
    final deviceType = getDeviceType(constraints.maxWidth);
    
    switch (deviceType) {
      case DeviceType.mobile:
        return MobileLayout();
      case DeviceType.tablet:
        return TabletLayout();
      case DeviceType.desktop:
        return DesktopLayout();
    }
  },
)

2.3 自适应网格

根据宽度自动调整列数：

LayoutBuilder(
  builder: (context, constraints) {
    // 计算列数
    final cardWidth = 120.0;
    final spacing = 8.0;
    final columns = (constraints.maxWidth / (cardWidth + spacing))
        .floor()
        .clamp(1, 6);  // 最少1列，最多6列
    
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columns,
        crossAxisSpacing: spacing,
        mainAxisSpacing: spacing,
      ),
      itemBuilder: (context, index) => Card(...),
    );
  },
)

---

3️⃣ AfterLayout（布局后回调）

3.1 什么是AfterLayout

AfterLayout 是一个自定义组件，用于在布局完成后获取组件的实际尺寸和位置信息。

3.2 实现原理

通过自定义 RenderObject，在 performLayout 方法中添加回调：

class AfterLayout extends SingleChildRenderObjectWidget {
  const AfterLayout({
    super.key,
    required this.callback,
    super.child,
  });

  final ValueChanged<RenderAfterLayout> callback;

  @override
  RenderAfterLayout createRenderObject(BuildContext context) {
    return RenderAfterLayout(callback: callback);
  }

  @override
  void updateRenderObject(
    BuildContext context,
    RenderAfterLayout renderObject,
  ) {
    renderObject.callback = callback;
  }
}

class RenderAfterLayout extends RenderProxyBox {
  RenderAfterLayout({required this.callback});

  ValueChanged<RenderAfterLayout> callback;

  @override
  void performLayout() {
    super.performLayout();
    // 布局完成后触发回调
    WidgetsBinding.instance.addPostFrameCallback((_) {
      callback(this);
    });
  }

  /// 获取组件在屏幕中的偏移坐标
  Offset get offset => localToGlobal(Offset.zero);
}

3.3 基础用法

AfterLayout(
  callback: (RenderAfterLayout ral) {
    print('AfterLayout回调:');
    print('  尺寸: ${ral.size}');        // Size(105.0, 17.0)
    print('  位置: ${ral.offset}');      // Offset(42.5, 290.0)
  },
  child: Text('flutter@wendux'),
)

控制台输出：

AfterLayout回调:
  尺寸: Size(105.0, 17.0)
  位置: Offset(42.5, 290.0)

3.4 获取相对坐标

使用 localToGlobal 方法获取相对于某个父组件的坐标：

Builder(builder: (context) {
  return Container(
    color: Colors.grey.shade200,
    width: 100,
    height: 100,
    child: AfterLayout(
      callback: (RenderAfterLayout ral) {
        // 获取相对于Container的坐标
        Offset offset = ral.localToGlobal(
          Offset.zero,
          ancestor: context.findRenderObject(),
        );
        print('占用空间范围: ${offset & ral.size}');
      },
      child: Text('A'),
    ),
  );
})

---

4️⃣ RenderAfterLayout详解

4.1 继承关系

RenderObject
    ↓
RenderBox
    ↓
RenderProxyBox
    ↓
RenderAfterLayout

4.2 主要方法

方法/属性	说明	返回值
size	组件尺寸	Size
offset	屏幕坐标	Offset
localToGlobal(Offset)	转换为全局坐标	Offset
localToGlobal(..., ancestor)	转换为相对坐标	Offset
paintBounds	绘制边界	Rect

4.3 坐标转换

// 转换为屏幕坐标
Offset screenOffset = ral.localToGlobal(Offset.zero);

// 转换为相对于ancestor的坐标
Offset relativeOffset = ral.localToGlobal(
  Offset.zero,
  ancestor: ancestorRenderObject,
);

// 计算占用空间
Rect bounds = offset & size;  // Rect.fromLTWH(x, y, width, height)

---

5️⃣ Build和Layout的交错执行

5.1 执行流程

graph TB A[开始Build] --> B[遇到LayoutBuilder] B --> C[进入Layout阶段] C --> D[执行LayoutBuilder.builder] D --> E[返回新Widget] E --> F[继续Build新Widget] F --> G[完成] style A fill:#e1f5ff style C fill:#ffe1e1 style F fill:#e1f5ff

关键点：

• Build 和 Layout 不是严格按顺序执行的
• LayoutBuilder 的 builder 在 Layout 阶段执行
• builder 中可以返回新 Widget，触发新的 Build

5.2 执行顺序示例

print('1. 开始Build');

LayoutBuilder(
  builder: (context, constraints) {
    print('3. 执行LayoutBuilder.builder（Layout阶段）');
    return Column(
      children: [
        Text('Hello'),  // 4. 触发新的Build
      ],
    );
  },
)

print('2. LayoutBuilder创建完成');

输出顺序：

1. 开始Build
2. LayoutBuilder创建完成
3. 执行LayoutBuilder.builder（Layout阶段）
4. Build Text Widget

---

🤔 常见问题（FAQ）

Q1: LayoutBuilder和MediaQuery的区别？

A:

特性	LayoutBuilder	MediaQuery
获取信息	父组件约束	屏幕尺寸
作用范围	当前组件	全局
响应变化	父约束变化	屏幕尺寸变化
使用场景	组件级响应式	全局响应式

// LayoutBuilder - 父组件约束
LayoutBuilder(
  builder: (context, constraints) {
    // constraints来自父组件
    return Text('宽度: ${constraints.maxWidth}');
  },
)

// MediaQuery - 屏幕尺寸
final screenWidth = MediaQuery.of(context).size.width;

Q2: 如何在StatefulWidget中使用AfterLayout？

A: 使用 addPostFrameCallback 避免在 build 中调用 setState

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Size _size = Size.zero;

  @override
  Widget build(BuildContext context) {
    return AfterLayout(
      callback: (RenderAfterLayout ral) {
        // ✅ 正确：使用 addPostFrameCallback
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (mounted) {
            setState(() {
              _size = ral.size;
            });
          }
        });
      },
      child: Text('Hello'),
    );
  }
}

Q3: LayoutBuilder的builder何时执行？

A: 在以下情况会执行：

1. 首次布局：组件首次被添加到树中
2. 约束变化：父组件传递的约束发生变化
3. 重新布局 ：调用 markNeedsLayout()

LayoutBuilder(
  builder: (context, constraints) {
    print('Builder执行，约束: $constraints');
    return Container();
  },
)

Q4: 如何优化LayoutBuilder性能？

A:

1. 避免过度嵌套
2. 缓存计算结果
3. 使用const构造函数

LayoutBuilder(
  builder: (context, constraints) {
    // ❌ 每次都创建新Widget
    return Column(
      children: [
        Text('Item 1'),
        Text('Item 2'),
      ],
    );
    
    // ✅ 使用const
    return const Column(
      children: [
        Text('Item 1'),
        Text('Item 2'),
      ],
    );
  },
)

Q5: AfterLayout会影响性能吗？

A: 会有轻微影响，因为：

1. 额外的回调开销
2. 可能触发额外的 setState
3. 每次布局都会执行回调

优化建议：

• 只在必要时使用
• 避免在回调中进行重量级操作
• 使用防抖/节流

---

🎯 跟着做练习

练习1：实现一个响应式导航栏

目标： 宽度>600显示完整标签，否则显示图标

步骤：

1. 使用 LayoutBuilder
2. 判断 constraints.maxWidth
3. 返回不同的UI

💡 查看答案

class ResponsiveNavigationBar extends StatelessWidget {
  const ResponsiveNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final showLabels = constraints.maxWidth > 600;
        
        return Container(
          height: 60,
          color: Colors.blue,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildNavItem(
                icon: Icons.home,
                label: '首页',
                showLabel: showLabels,
              ),
              _buildNavItem(
                icon: Icons.search,
                label: '搜索',
                showLabel: showLabels,
              ),
              _buildNavItem(
                icon: Icons.person,
                label: '我的',
                showLabel: showLabels,
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildNavItem({
    required IconData icon,
    required String label,
    required bool showLabel,
  }) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, color: Colors.white),
        if (showLabel) ...[
          const SizedBox(height: 4),
          Text(
            label,
            style: const TextStyle(color: Colors.white, fontSize: 12),
          ),
        ],
      ],
    );
  }
}

---

练习2：实现文本溢出检测

目标： 检测Text是否溢出，显示"展开"按钮

步骤：

1. 使用 AfterLayout 获取Text尺寸
2. 计算是否溢出
3. 显示/隐藏展开按钮

💡 查看答案

class ExpandableText extends StatefulWidget {
  const ExpandableText({super.key, required this.text});

  final String text;

  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool _expanded = false;
  bool _isOverflow = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AfterLayout(
          callback: (RenderAfterLayout ral) {
            // 检查是否溢出
            final textPainter = TextPainter(
              text: TextSpan(text: widget.text),
              maxLines: _expanded ? null : 3,
              textDirection: TextDirection.ltr,
            )..layout(maxWidth: ral.size.width);

            WidgetsBinding.instance.addPostFrameCallback((_) {
              if (mounted) {
                setState(() {
                  _isOverflow = textPainter.didExceedMaxLines;
                });
              }
            });
          },
          child: Text(
            widget.text,
            maxLines: _expanded ? null : 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        if (_isOverflow)
          TextButton(
            onPressed: () {
              setState(() {
                _expanded = !_expanded;
              });
            },
            child: Text(_expanded ? '收起' : '展开'),
          ),
      ],
    );
  }
}

---

📋 小结

核心概念

组件	用途	执行时机
LayoutBuilder	获取约束，响应式布局	Layout阶段
AfterLayout	获取尺寸和位置	Layout完成后
BoxConstraints	约束信息	Layout阶段传递

LayoutBuilder使用场景

场景	示例
响应式布局	根据宽度显示不同UI
自适应网格	动态调整列数
断点设计	手机/平板/桌面切换
动态组件	根据空间大小选择组件

AfterLayout使用场景

场景	示例
尺寸获取	获取组件实际大小
位置计算	计算组件坐标
溢出检测	判断Text是否溢出
动画准备	获取起始位置

记忆技巧

1. LayoutBuilder ：Layout阶段构建UI
2. AfterLayout ：Layout之后获取信息
3. Build和Layout ：可以交错执行
4. BoxConstraints ：约束向下传递
5. RenderObject ：渲染树的节点

---

🔗 相关资源

• LayoutBuilder 官方文档
• BoxConstraints 官方文档
• RenderBox 官方文档
• RenderObject 官方文档

---