当前位置：首页 > article >正文

flutter Selector 使用

article 2025/2/8 22:56:44

在 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 {
  @override
  Widget 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 方法。