面试题：Flutter中减少重绘策略之布局优化

避免不必要的嵌套
- 分析布局需求：在开始编写布局代码前，仔细分析界面的结构，思考是否真的需要多层嵌套。例如，若只是简单地将几个组件水平排列，使用Row就可以，而不需要先套一层Container再在其中使用Row。
- 使用ConstrainedBox代替多层嵌套：有时候，开发者可能会嵌套多个Container来设置不同的尺寸约束。实际上，可以使用ConstrainedBox直接对其子组件设置约束，减少嵌套层级。例如：
```
ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 50,
    maxHeight: 100,
  ),
  child: Text('Some text'),
);
```
使用合适的布局组件
- 水平和垂直排列：
  - Row和Column：这两个是最基础的水平和垂直排列组件。当需要将多个组件水平排列时，优先使用Row；垂直排列则优先使用Column。例如，一个简单的导航栏可以用Row来排列多个Text或IconButton。
  - Flex：Row和Column实际上是Flex的特殊情况。Flex更加灵活，通过设置direction属性可以实现类似Row（Axis.horizontal）或Column（Axis.vertical）的效果。在一些复杂的布局场景下，Flex能更好地控制子组件的排列和伸缩。
- 自适应布局：
  - Expanded：在Row或Column中，如果希望某个组件能够自适应剩余空间，使用Expanded。比如在一个水平布局中，一个按钮固定宽度，另一个文本组件需要占据剩余空间，就可以将文本组件包裹在Expanded中。
  - Flexible：与Expanded类似，但Flexible可以控制组件是否收缩，而Expanded强制组件充满剩余空间。如果不希望某个组件在空间不足时被压缩得太小，可以使用Flexible并设置合适的flex系数。
- 绝对定位布局：
  - Positioned：结合Stack使用，Positioned可以实现绝对定位。在一些有特殊布局需求，如图片上叠加文本且文本位置固定的场景中，Stack内部使用Positioned来精确控制子组件的位置。例如：
```
Stack(
  children: [
    Image.asset('assets/image.jpg'),
    Positioned(
      left: 20,
      top: 20,
      child: Text('Overlay text'),
    )
  ],
);
```
- 列表布局：
  - ListView：当有大量相似组件需要垂直或水平滚动展示时，使用ListView。ListView.builder适用于组件数量较多甚至无限的情况，它通过按需构建的方式提高性能，避免一次性创建大量组件导致内存问题。
  - GridView：用于展示网格状布局，如图片画廊等场景。同样有GridView.builder来优化大量数据的展示。

星途面试题库

面试题：Flutter中减少重绘策略之布局优化

知识考点

面试题答案