flutter中，selector写法优化？

Question

flutter中有如下代码：

Selector<CounterModel, int>(
  selector: (context, counterModel) => counterModel.counter,
  builder: (context, counter, child) {
    print('Selector_1');
    return Text('Counter：$counter');
  },
),

实际上，关于UI的代码只有一句return Text('Counter：$counter')，只是这句中需要访问变量counter，那么如何把这个获取变量的代码提取出去呢？保证UI更干净？

Answer 1

为 BuildContext 创建扩展方法：

extension CounterModelExtension on BuildContext {
  int get counterValue => select<CounterModel, int>((model) => model.counter);
}

然后在 UI 中：

Builder(
  builder: (context) {
    print('Selector_1');
    return Text('Counter：${context.counterValue}');
  },
)

Answer 2

class CounterText extends StatelessWidget {
  const CounterText({Key? key}) : super(key: key);

  // 提取selector函数
  static int counterSelector(BuildContext context, CounterModel model) {
    return model.counter;
  }
  
  // 提取UI构建函数
  static Widget counterBuilder(BuildContext context, int counter, Widget? child) {
    print('Selector_1');
    return Text('Counter：$counter');
  }

  @override
  Widget build(BuildContext context) {
    return Selector<CounterModel, int>(
      selector: counterSelector,
      builder: counterBuilder,
    );
  }
}

// 使用时
CounterText()