Katana Listenables

[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]

介绍 #

在创建小部件时，您可能需要管理多个继承自 ChangeNotifiers 的 TextEditingControllers、ValueNotifiers 和其他控制器。

这通常会看起来像以下内容。

• 在 State 中定义多个继承自 ChangeNotifier 的类
• 为状态管理包创建一个继承自 ChangeNotifier 的类，并为所有类添加 addListener

为了简化上述实现，我创建了以下包。

• 创建一个简单的描述继承自 ChangeNotifier 的类
• 通过传递一个继承自 ChangeNotifier 的对象来监控其参数。
  • 当受监控的 ChangeNotifier 发生更改时，更改将传播到自己的对象。

例如，可以使用以下语句：

[@listenables](/user/listenables)
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
}

运行 build_runner 后，将自动为作为参数传递的继承自 ChangeNotifier（Listenable）的类生成一个类。

如果您将其加载到 riverpod 中，例如，如下所示：

final controllerProvider = ChangeNotifierProvider((_) {
  return ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );
});

class TestPage extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // 此时，控制器也会收到更改通知，并且小部件将再次更新。
    ~~~~
  }
}

当 controller 中定义的 emailTextEditingController 的内容更新时，更改通知将传播到 controller。

由于控制器也是一个 ChangeNotifier，可以通过 addListener 等方法监控更改。

安装 #

要使用 build_runner 进行代码生成，请导入以下包。

flutter pub add katana_listenables
flutter pub add --dev build_runner
flutter pub add --dev katana_listenables_builder

实现 #

创建类 #

创建一个如下所示的类

添加 part '(filename).listenable.dart';。

用 [@listenables](/user/listenables) 注解定义的类，并混入 _$(定义的类名) 和 ChangeNotifier。

构造函数在 factory 中创建，并定义在参数中使用的继承自 ChangeNotifier 和 Listenable 的类。

（必需值标记为 "required"；如果没有标记为 "required"，则保持不变。）

构造函数之后，写上 = _ (定义的类名)。

// controller.dart

import 'package:flutter/material.dart';
import 'package:katana_listenables/katana_listenables.dart';

part 'controller.listenable.dart';

[@listenables](/user/listenables)
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
}

代码生成 #

通过输入以下命令执行自动代码生成。

flutter pub run build_runner build --delete-conflicting-outputs

如何使用 #

由于生成的类继承自 ChangeNotifier，因此可以像一般的 ChangeNotifier 一样使用。

• 对于 State

class TestPage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => TestPageState();
}

class TestPageState extends State<TestPage> {
  final controller = ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );

  [@override](/user/override)
  void initState(){
    super.initState();
    controller.addListener(_handledOnUpdate);
  }
	
  void _handledOnUpdate(){
    setState((){});
  }

  [@override](/user/override)
  void dispose(){
    super.dispose();
    controller.removeListener(_handledOnUpdate);
    controller.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // 此时，控制器也会收到更改通知，并且小部件将再次更新。
    ~~~~
  }
}

• 对于 riverpod

final controllerProvider = ChangeNotifierProvider((_) {
  return ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );
});

class TestPage extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // 此时，控制器也会收到更改通知，并且小部件将再次更新。
    ~~~~
  }
}

附加用法 #

添加方法 #

要添加方法，请使用以下写法。

(定义的类名)._(); 构造函数必须添加。

// controller.dart

import 'package:flutter/material.dart';
import 'package:katana_listenables/katana_listenables.dart';

part 'controller.listenable.dart';

[@listenables](/user/listenables)
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
  ControllerGroup._(); // 必须添加此额外构造函数

  bool checked {
    return checkTerms?.value ?? false;
  }
}

GitHub 赞助者 #

赞助者总是欢迎的。感谢您的支持！