面试题：Flutter Column布局在复杂场景下的性能优化及垂直排列策略

子Widget复用：
- 使用 ListView.builder 替代普通的 Column。ListView.builder 只会构建当前视口内以及附近的子Widget，而不是一次性构建所有子Widget。例如在Flutter中，可以这样实现：
```
ListView.builder(
  itemCount: chatMessages.length,
  itemBuilder: (context, index) {
    final message = chatMessages[index];
    return buildChatMessageWidget(message);
  },
);
```
- 对于不同类型的消息，可以根据消息类型进行复用。比如对于文本消息，可以使用同一个文本Widget样式，通过改变文本内容来复用；对于图片消息，可以复用图片加载和显示的Widget结构，只改变图片的URL等属性。
布局计算优化：
- 减少嵌套布局：尽量避免过多的嵌套 Container 等布局Widget。例如，在构建聊天消息Widget时，将相关的子Widget组合成一个自定义Widget，减少不必要的中间布局层。
- 缓存布局信息：对于固定类型消息的布局，可以在初始化时计算好布局信息并缓存。比如对于图片消息，预先计算好图片在不同尺寸下的显示大小，避免每次渲染都重新计算。

基于消息类型的排列：
- 可以通过一个工厂方法来创建不同类型消息的Widget。例如：
```
Widget buildChatMessageWidget(ChatMessage message) {
  if (message is TextChatMessage) {
    return TextChatMessageWidget(message.text);
  } else if (message is ImageChatMessage) {
    return ImageChatMessageWidget(message.imageUrl);
  }
  return Container();
}
```
- 对于不同类型消息的垂直排列方式，可以在各自的Widget内部进行控制。比如文本消息可以根据文本长度自适应高度，图片消息可以设置固定高度或者根据图片原始比例自适应高度。
考虑交互场景：
- 如果聊天记录支持展开收起等交互，在布局时要考虑到这些状态变化对垂直排列的影响。可以使用 AnimatedContainer 等组件来平滑过渡布局变化，并且在变化过程中尽量减少重新布局的范围。例如，当展开一个折叠的文本消息时，只重新布局相关的文本区域，而不是整个聊天消息区域。

星途面试题库