Flutter属性监听插件simple_property_observer的使用

Flutter属性监听插件simple_property_observer的使用

simple_property_observer 是一个用于观察属性变化的简单Dart包。它也被称为属性更改通知器。

如何使用

本仓库包含两个包：simple_property_observer 和 simple_property_observer_builder。这些包可以在纯Dart项目和Flutter项目中使用。example 是一个简单的使用这些包的例子。

依赖设置

在你的 pubspec.yaml 文件中，添加以下依赖项：

dependencies:
  simple_property_observer: any

dev_dependencies:
  build_runner: any
  simple_property_observer_builder: any

• simple_property_observer 包含了属性可观察模式的定义和自动生成的注解。
• simple_property_observer_builder 包含了命令行工具用于自动生成文件。

定义你的类

例如，编写以下带有注解的类：

import 'package:simple_property_observer/simple_property_observer.dart';

part 'example.g.dart';

[@propertyObservable](/user/propertyObservable)
class Example {
  [@observable](/user/observable)
  String? get observableProperty => null;
}

Dart分析器会指出错误，但忽略它并继续到下一步。

要点：

• 使用 [@propertyObservable](/user/propertyObservable) 注解你的类以自动生成属性可观察模式。
• 创建一个 GETTER 并用 [@observable](/user/observable) 注解它。
• 添加 part 句子用于自动生成文件。

然后，在终端运行构建命令：

$ flutter packages pub run build_runner build

如果你创建的是一个纯Dart项目，则运行以下命令：

$ dart run build_runner build

完成命令后，你会看到 example.g.dart 文件：

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'example.dart';

// **************************************************************************
// PropertyObservableGenerator
// **************************************************************************

mixin _ObservableMembers on PropertyObservable {
  String? __observableProperty;
  set observableProperty(String? value) {
    if (__observableProperty == value) {
      return;
    }
    final oldValue = __observableProperty;
    __observableProperty = value;
    notifyPropertyChanged(PropertyChangedInfo(
        'observableProperty', oldValue, __observableProperty));
  }
}

要点：

然后，你必须修改 example.dart 文件如下：

import 'package:simple_property_observer/simple_property_observer.dart';

part 'example.g.dart';

[@propertyObservable](/user/propertyObservable)
class Example with PropertyObservable, _ObservableMembers {
  [@observable](/user/observable)
  String? get observableProperty => __observableProperty;
}

添加 with PropertyObservable, _ObservableMembers 并将 GETTER 从 null 修改为 __observableProperty。

观察实例

你可以使用 registerObserver 方法来观察属性的变化：

import 'example.dart';

void main() {
  final example = Example();

  // 观察属性变化
  example.registerObserver((info) {
    print('${info.name} changed: from ${info.oldValue} to ${info.newValue}');
  });

  print('set Apple');
  example.observableProperty = 'Apple';

  print('set Banana');
  example.observableProperty = 'Banana';

  // 显示以下输出：
  // set Apple
  // observableProperty changed: from null to Apple
  // set Banana
  // observableProperty changed: from Apple to Banana
}

你也可以使用 unregisterObserver 方法取消观察。

示例Demo

以下是完整的示例代码，演示如何使用 simple_property_observer 插件：

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

part 'example.g.dart';

[@propertyObservable](/user/propertyObservable)
class Example with PropertyObservable, _ObservableMembers {
  [@observable](/user/observable)
  String? get observableProperty => __observableProperty;

  void changeProperty(String newValue) {
    observableProperty = newValue;
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Simple Property Observer Example")),
        body: Center(
          child: ExamplePropertyObserver(),
        ),
      ),
    );
  }
}

class ExamplePropertyObserver extends StatefulWidget {
  [@override](/user/override)
  _ExamplePropertyObserverState createState() => _ExamplePropertyObserverState();
}

class _ExamplePropertyObserverState extends State<ExamplePropertyObserver> {
  final Example _example = Example();

  [@override](/user/override)
  void initState() {
    super.initState();
    _example.registerObserver((info) {
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            _example.changeProperty("Apple");
          },
          child: Text("Set Apple"),
        ),
        ElevatedButton(
          onPressed: () {
            _example.changeProperty("Banana");
          },
          child: Text("Set Banana"),
        ),
        Text(_example.observableProperty ?? "No Value"),
      ],
    );
  }
}