flutter Selector 使用

ops/2025/2/9 7:32:36/

在 Flutter 中，Selector 是 provider 包中的一个组件，用于在状态管理中高效地选择和监听特定部分的状态变化。Selector 可以帮助你避免不必要的重建，只在你关心的数据发生变化时才重建 widget。

基本用法

Selector 的基本用法如下：

Selector<MyModel, SelectedType>(selector: (context, model) => model.selectedValue,builder: (context, selectedValue, child) {return SomeWidget(value: selectedValue,child: child,);},child: SomeChildWidget(),
);

参数说明

selector: 这是一个函数，用于从 Provider 中选择你关心的部分数据。它接收两个参数：context 和 model，并返回你关心的数据。
builder: 这是一个构建函数，当 selector 返回的数据发生变化时，builder 会被调用。它接收三个参数：context、selectedValue（selector 返回的数据）和 child（child 参数传递的 widget）。
child: 这是一个可选的参数，用于传递一个不变的 widget。这个 widget 不会因为 selector 的数据变化而重建，可以提高性能。

示例

假设你有一个 CounterModel，它包含一个 count 和一个 doubleCount。你只关心 doubleCount 的变化，可以使用 Selector 来监听 doubleCount 的变化：

class CounterModel with ChangeNotifier {int _count = 0;int get count => _count;int get doubleCount => _count * 2;void increment() {_count++;notifyListeners();}
}class CounterApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return ChangeNotifierProvider(create: (_) => CounterModel(),child: Scaffold(appBar: AppBar(title: Text('Selector Example')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Selector<CounterModel, int>(selector: (context, model) => model.doubleCount,builder: (context, doubleCount, child) {return Text('Double Count: $doubleCount',style: Theme.of(context).textTheme.headline4,);},),SizedBox(height: 20),Consumer<CounterModel>(builder: (context, model, child) {return ElevatedButton(onPressed: model.increment,child: Text('Increment'),);},),],),),),);}
}

解释

Selector<CounterModel, int>: 这里我们指定了 Selector 的类型参数，第一个是 CounterModel，第二个是 int，表示我们选择的数据类型是 int。
selector: (context, model) => model.doubleCount: 我们选择 doubleCount 作为我们关心的数据。
builder: (context, doubleCount, child): 当 doubleCount 发生变化时，builder 会被调用，并返回一个新的 Text widget。
Consumer<CounterModel>: 这是一个普通的 Consumer，用于监听 CounterModel 的变化，并在按钮点击时调用 increment 方法。