性能优化组件

性能优化组件帮助提升 Flutter 应用的渲染性能和响应速度。

提示：合理使用性能优化组件可以显著提升应用的用户体验。
📱 渲染效果预览
🎨
RepaintBoundary 隔离重绘
重绘区域被隔离，只影响当前组件
动画内容
📱 渲染效果预览
事件穿透
覆盖层不阻止点击，事件可以穿透

RepaintBoundary

RepaintBoundary 隔离重绘区域，减少不必要的重绘。

RepaintBoundary(
  child: AnimatedContainer(
    duration: Duration(seconds: 1),
    color: Colors.blue,
    child: Text('动画内容'),
  ),
)
注意：RepaintBoundary 会创建一个新的图层，过度使用可能会增加内存消耗。
📱 渲染效果预览
事件被阻止
覆盖层阻止点击，事件无法穿透

IgnorePointer

IgnorePointer 忽略所有指针事件，让事件穿透到下层。

Stack(
  children: [
    ElevatedButton(
      onPressed: () => print('点击'),
      child: Text('按钮'),
    ),
    IgnorePointer(
      child: Container(
        color: Colors.transparent,
        child: Text('覆盖层'),
      ),
    ),
  ],
)
📱 渲染效果预览
✅
const 优化
编译时常量
无需重建
高性能
❌
无 const
每次重建
额外开销
低性能

AbsorbPointer

AbsorbPointer 吸收所有指针事件，阻止事件穿透。

Stack(
  children: [
    ElevatedButton(
      onPressed: () => print('点击'),
      child: Text('按钮'),
    ),
    AbsorbPointer(
      child: Container(
        color: Colors.grey.withOpacity(0.5),
        child: Text('禁用层'),
      ),
    ),
  ],
)
📱 渲染效果预览
✓
项目 1
状态保持
✓
项目 2
状态保持
✓
项目 3
状态保持
✓
项目 4
状态保持

const Widget

使用 const 构造函数可以创建编译时常量，提升性能。

// ✅ 推荐：使用 const
const Text('标题')
const Icon(Icons.star)
const SizedBox(height: 16)

// ❌ 避免：不使用 const
Text('标题')
Icon(Icons.star)
SizedBox(height: 16)
📱 渲染效果预览
ListView.builder
内存占用: 20%
普通 ListView
内存占用: 100%
ListView.builder 只渲染可见项，内存占用更低

AutomaticKeepAlive

AutomaticKeepAlive 保持 Widget 状态，避免重复构建。

class MyListItem extends StatefulWidget {
  @override
  _MyListItemState createState() => _MyListItemState();
}

class _MyListItemState extends State
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListTile(title: Text('保持状态'));
  }
}
📱 渲染效果预览
ListView.builder
内存占用: 20%
普通 ListView
内存占用: 100%
ListView.builder 只渲染可见项，内存占用更低

ListView.builder

ListView.builder 使用懒加载，只渲染可见的项目。

// ✅ 推荐：使用 builder
ListView.builder(
  itemCount: 10000,
  itemBuilder: (context, index) {
    return ListTile(title: Text('项目 $index'));
  },
)

// ❌ 避免：使用普通 ListView
ListView(
  children: List.generate(10000, (index) {
    return ListTile(title: Text('项目 $index'));
  }),
)
性能优化最佳实践：
  • 使用 const 构造函数
  • 避免过度嵌套
  • 使用 RepaintBoundary 隔离频繁重绘的部分
  • 使用 ListView.builder 处理长列表
  • 避免在 build 方法中进行复杂计算
← 滚动组件 网络与数据组件 →