Flutter中Selector源码如何使用

在Flutter中，Selector组件的源码如何使用？我看了官方文档但还有些疑惑，比如如何定义selector函数、什么时候会触发重建，以及它和Provider的select方法有什么区别？能否结合具体代码示例说明它的性能优化原理？

2 回复

Flutter中Selector用于优化Provider性能，避免不必要的重建。基本用法：

Selector<Model, SelectedValue>(
  selector: (context, model) => model.selectedValue,
  builder: (context, value, child) {
    return Text(value.toString());
  },
)

selector函数返回需要监听的数据，builder只在数据变化时重建。

更多关于Flutter中Selector源码如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，Selector是provider包中的一个Widget，用于在状态管理中高效地监听和选择特定数据片段，避免不必要的重建。其核心思想是仅当选定数据发生变化时才重建Widget，提升性能。

基本用法

Selector<Model, SelectedType>(
  selector: (context, model) => model.selectedValue,
  builder: (context, selectedValue, child) {
    return Text(selectedValue.toString());
  },
);

参数详解

  1. selector：函数，从Model中提取需要监听的数据
  2. builder：构建函数，接收三个参数：
    • context：构建上下文
    • selectedValue：选择器返回的数据
    • child：可优化的子Widget

完整示例

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

// 使用Selector
Selector<CounterModel, int>(
  selector: (context, model) => model.count,
  builder: (context, count, child) {
    return Text('Count: $count');
  },
)

性能优化技巧

  1. 使用child参数避免重建静态内容：
Selector<Model, SelectedType>(
  selector: (context, model) => model.value,
  builder: (context, value, child) => Column(
    children: [
      child!, // 静态部分
      Text('Dynamic: $value'),
    ],
  ),
  child: const Text('Static Content'), // 不会随选择器重建
);
  1. 确保selector返回的数据实现了==方法，或使用shouldRebuild自定义比较逻辑

注意事项

  • 选择器函数应保持纯净，避免副作用
  • 对于简单场景可直接使用Consumer
  • 复杂数据选择时，Selector能显著减少重建次数

通过合理使用Selector，可以精准控制Widget重建范围，有效提升Flutter应用性能。

回到顶部