布局构建优化思路
- 避免嵌套过深：
- 尽量简化布局结构，减少不必要的Widget嵌套。在Flutter中，每一层Widget嵌套都会带来一定的性能开销。例如，使用
Row、Column等简单布局时，避免多层嵌套。
- 可以使用
Flex布局的mainAxisAlignment和crossAxisAlignment属性，灵活调整子Widget的排列方式，减少嵌套层级。
- 使用
const Widgets：
- 如果Widget的属性不会改变，将其声明为
const。Flutter会对const Widget进行优化，在Widget树更新时，const Widget不需要重新构建。
- 例如：
const Text('This is a const text');
- 按需构建：
- 使用
IndexedStack、Offstage等Widget来控制子Widget的构建和显示。IndexedStack可以根据索引显示指定的子Widget，其他子Widget不会被构建；Offstage可以控制子Widget是否显示，当offstage为true时，子Widget不会被渲染。
- 示例代码：
IndexedStack(
index: _currentIndex,
children: [
FirstPage(),
SecondPage(),
],
);
Offstage(
offstage:!_isShow,
child: SomeWidget(),
);
绘制流程优化思路
- 减少重绘：
- 尽量保持Widget的状态稳定，避免频繁触发重绘。例如，不要在
build方法中进行复杂的计算或数据获取，将这些操作放在initState或didUpdateWidget等生命周期方法中。
- 对于动画相关的重绘，可以使用
AnimatedBuilder，它只会在动画值变化时才重建其子Widget，而不是整个父Widget树。
- 示例代码：
AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return Transform.rotate(
angle: _animationController.value,
child: child,
);
},
child: MyWidget(),
);
- 图片优化：
- 对于不同平台，使用合适分辨率的图片。在
pubspec.yaml中配置不同分辨率的图片资源，Flutter会根据设备屏幕密度自动选择合适的图片。
- 例如：
flutter:
assets:
- images/
- images/2.0x/
- images/3.0x/
- 加载图片时，使用`Image.asset`并指定`width`和`height`，这样可以避免图片在绘制时进行额外的尺寸计算。
Image.asset(
'images/logo.png',
width: 100,
height: 100,
);
- 缓存绘制：
- 使用
RepaintBoundary包裹需要缓存绘制的Widget。RepaintBoundary会缓存其子Widget的绘制结果，当子Widget没有发生变化时，不会重新绘制，从而提高性能。
- 示例代码：
RepaintBoundary(
child: MyComplexWidget(),
);
平台相关优化思路
- 针对iOS平台：
- iOS设备通常有较高的性能，但也需要注意内存管理。在使用图片等资源时，确保及时释放不再使用的资源。
- 可以使用
Cupertino风格的Widget，它们在iOS平台上有更好的原生外观和性能表现。例如，使用CupertinoButton代替ElevatedButton在iOS上会更适配。
- 示例代码：
CupertinoButton(
onPressed: () {},
child: Text('Cupertino Button'),
);
- 针对Android平台：
- Android设备的性能差异较大，需要更加注重布局的轻量化。避免使用过于复杂的自定义绘制，尽量使用系统提供的绘制方法。
- 使用
Material风格的Widget，它们在Android平台上有更好的兼容性和性能。例如，ElevatedButton在Android上是比较常用的按钮样式。
- 示例代码：
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
);
