面试题：Flutter布局性能优化与布局类Widgets的深度定制

一、布局性能优化 - 合理选择和配置布局类Widgets

减少嵌套层次
- 说明：尽量避免过多的嵌套布局。例如，能用Row或Column直接包裹子Widget实现排列的，就不要嵌套多个Container或Padding等布局。多层嵌套会增加布局计算的复杂度和渲染开销。
- 示例：原本用Container嵌套Padding嵌套Text来实现一个带内边距的文本显示，可直接用Padding包裹Text来简化。
```
// 优化前
Container(
  padding: EdgeInsets.all(16),
  child: Text('Hello'),
);
// 优化后
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Hello'),
);
```
使用合适的布局类型
- Flex布局：Row和Column属于Flex布局，适合线性排列子Widget。当需要按比例分配空间时，可使用Expanded或Flexible。例如，在一个水平布局中，有两个子Widget，一个固定宽度，另一个占剩余空间，可如下实现：
```
Row(
  children: [
    SizedBox(width: 100, child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.blue)),
  ],
);
```
- Stack布局：用于重叠布局。如果有多个Widget需要重叠显示，如一个背景图片上叠加一些文字和图标，Stack是较好选择。注意使用Positioned来精确控制子Widget位置时，避免过度使用导致布局混乱和性能下降。
```
Stack(
  children: [
    Image.asset('background.jpg'),
    Positioned(
      top: 100,
      left: 100,
      child: Text('Overlay Text'),
    )
  ],
);
```
- GridView和ListView：在显示大量列表数据时，使用ListView（线性列表）或GridView（网格列表）。它们采用视口回收机制，只渲染当前可见区域的子Widget，大大提高性能。例如，显示1000条商品数据列表：
```
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
);
```
避免不必要的重绘
- 使用const Widget：如果一个Widget的属性在构建后不会改变，将其声明为const。这样Flutter在构建时会复用相同的Widget实例，减少重绘开销。例如：
```
const MyButton = TextButton(
  onPressed: null,
  child: Text('Button'),
);
```
- 使用LayoutBuilder谨慎：LayoutBuilder会在父Widget布局发生变化时重新构建，所以在使用时要确保其必要性。如果只是需要获取父Widget的约束来设置子Widget大小，可尝试在子Widget构建时获取，而不是依赖LayoutBuilder。

二、深度定制布局 - 当现有布局类Widgets无法满足需求

定制思路
- 分析需求：首先明确特定业务需求，比如需要一种既能按比例分配空间又能根据子Widget数量动态调整布局方向的布局。分析现有布局Widget为何不能满足，是缺少特定属性、布局逻辑不同还是其他原因。
- 参考现有布局：查看与需求相近的现有布局类Widgets的源码，了解其布局逻辑和实现方式。例如，要定制一种特殊的Flex布局，可参考Row和Column的源码。
- 确定扩展或重写方式：考虑是通过继承现有布局类进行扩展，还是完全重写一个新的布局类。如果需求与现有布局类部分相似，继承扩展可能更合适；若需求差异较大，重写可能更清晰。

关键步骤

继承或新建类：

继承：如果选择继承，例如继承Flex类来定制布局，定义新类。

class MyCustomFlex extends Flex {
  MyCustomFlex({
    Key? key,
    required Axis direction,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, direction: direction, children: children);
}

新建：若完全新建，定义一个新的布局类，继承自MultiChildRenderObjectWidget，因为通常定制布局会管理多个子Widget。

class MyNewLayout extends MultiChildRenderObjectWidget {
  const MyNewLayout({
    Key? key,
    required List<Widget> children,
  }) : super(key: key, children: children);
  @override
  RenderObject createRenderObject(BuildContext context) {
    return _MyNewLayoutRenderObject();
  }
}

实现布局逻辑：

在performLayout方法中：对于继承的类，可能需要重写performLayout方法来实现自定义布局逻辑。例如，自定义的MyCustomFlex可能需要在performLayout中调整子Widget的排列方式和空间分配。

@override
void performLayout() {
  // 自定义的布局逻辑，如改变子Widget的排列顺序
  for (int i = 0; i < children.length; i++) {
    final child = children[i];
    // 计算子Widget的大小和位置
    size = Size(desiredWidth, desiredHeight);
    child.layout(constraints, parentUsesSize: true);
    // 放置子Widget
    positionChild(child, 0, 0);
  }
  // 设置自身大小
  size = Size(maxWidth, maxHeight);
}

对于新建类：在对应的RenderObject类（如_MyNewLayoutRenderObject）中实现performLayout方法来定义具体的布局行为。

测试和优化：编写单元测试来验证定制布局在不同场景下的正确性，确保满足业务需求。同时，检查布局性能，如是否存在过度重绘或不必要的计算，对发现的问题进行优化。

星途面试题库

面试题：Flutter布局性能优化与布局类Widgets的深度定制

知识考点

面试题答案

一、布局性能优化 - 合理选择和配置布局类Widgets

二、深度定制布局 - 当现有布局类Widgets无法满足需求