Flutter插件yaz的使用方法

Flutter插件yaz引言

本插件支持Web、移动和桌面应用程序。插件分为两个主要部分：

1. 状态管理
2. 内容管理

Flutter插件yaz状态管理

示例代码

/// 您不需要使用状态fulWidget
class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  /// 1 ) 定义变量并转换为通知器
  final counter = 0.notifier;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '您已经按下了按钮次数：',
            ),
            /// 2 ) 将您的变量转换为ChangeNotifier
            counter.builder((context) => Text(
                  '${counter.value}',
                  style: Theme.of(context).textTheme.headline4,
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          /// 3) 增加计数
          counter.value++;
        },
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

如何将对象转换为ChangeNotifier？

任何对象都可以转换为ChangeNotifier:

var counter = 0.notifier;
var editing = "Mehmet Yaz".notifier; 
var foo = Foo().notifier; 

单个变量监听

/// 定义通知器
var counter = 0.notifier;

/// 使用小部件监听
YazListenerWidget(
  changeNotifier: counter,
  builder: (BuildContext c) {
    return Text(counter.value.toString());
  }
  
  // 或者
  counter.builder((context) => Text(counter.value.toString()))
);

多个变量监听

/// 定义多个通知器
final counter1 = 0.notifier;
final counter2 = 5.notifier;
final counter3 = 10.notifier;

/// 使用小部件监听
YazListenerWidget(
  changeNotifier: counter1.combineWith([counter2, counter3]),
  /// 或者 changeNotifier:  MultipleChangeNotifier([counter1 , counter2 ,counter3]),
  /// 或者 changeNotifier: [counter1 , counter2, counter3].notifyAll
  builder: (BuildContext c) {
    return Text(counter.value.toString());
  }
);

监听集合变化

方法一：经典总变化方式

var list = [0,1,2,3].notifier

list.value = [10 , 20 , 30]; // 触发

list.value[0] = 50; // 不触发

方法二：在任何更改时触发

YazList<int> list = [0,1,2,3].listenAll;
list[0] = 5; // 触发
list.add(10); // 触发
list.remove(0); // 触发

方法三：单独触发每个元素

var listeners = [0,1].listeners;

// 0. 小部件
YazListenerWidget(
  changeNotifier: listeners[0],
  // ....
);

// 1. 小部件
YazListenerWidget(
  changeNotifier: listeners[1],
  // ....
);

// 2. 小部件
YazListenerWidget(
  changeNotifier: listeners.notifyAll,
  // ....
);

listeners[0].value++; // 重建0. 和 2. 小部件
listeners[1].value++; // 重建1. 和 2. 小部件

内容管理

简单示例

///
class MyHomePage extends StatelessWidget {
  ///
  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        /// 包裹选项的小部件
        /// 可以使用默认值或在启动屏幕时初始化
        child: OptionWrapper<double>(
          userOption: UserOption("font_size_multiplier", defaultValue: 0.5),
          builder: (c, option) {
            return Text(
              "用户选项示例",
              style: TextStyle(fontSize: 10.0 * option.value), 
              /// 重新构建新选项
              /// 或者直接使用：
              /// fontSize: 10.0 * UserOption("font_size_multiplier").value, 
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          /// 更改选项
          UserOption<double>("font_size_multiplier").value += 0.1;
        },
        tooltip: '增加字体大小',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用说明

您可以在任何地方获取选项：

UserOption<double>("font_size").value;

您可以更改它：

UserOption<double>("font_size").value = 10.0;

您可以通过包裹小部件来监听选项的变化：

OptionsWrapper(
  option: UserOption<double>("font_size"),
  builder: (c, option) {
    return Text("Hello World!", style: TextStyle(fontSize: option.value));  
  }   
)

您可以使用默认值进行初始化：

UserOptions().init(List<UserOption> list);

您可以监听更改以从数据库获取数据：

UserOptions().onUserOptionsChange((options) {
  // 获取数据
});

如果未使用初始化函数，您可以在第一次使用时设置默认值。在会话流程中，您无需为后续使用设置默认值：

UserOption<double>("font_size", defaultValue: 10);

内容控制器

您可以存储或缓存常用的项目。

例如：好友用户，电子商务分类等。

您只需通过标识符获取内容。

您不需要重复查询数据库来检索内容。

然而，如果内容太旧，它将从数据库中恢复。

var controller = UserController();
await controller.getContent("user_1");
/// 如果之前已获取过内容，将从本地获取
/// 否则，将从数据库获取，保存到本地并返回给您

实现缓存

您的可缓存类必须有一个唯一标识符。

///
class User with CacheAble<User> {
  ///
  User(this.userId, this.userName);
  
  @override
  String get identifier => userId;

  ///
  String userId;

  ///
  String userName;
}

实现您的控制器

有两种类型的内容控制器：

1. 缓存内容控制器：仅在会话中存储内容。
2. 存储内容控制器：将内容存储在设备的键值存储中。

///
class UserController extends StorageContentController<User> {
  
  /// 推荐单例模式

  /// 通过标识符获取内容的getter
  /// 常见使用此getter从数据库获取内容
  @override
  Future<User?> contentGetter(String identifier) async {
    await Future.delayed(const Duration(milliseconds: 300));
    return User(identifier, "User Of $identifier");
  }

  /// 不需要缓存内容控制器
  /// 需要存储设备存储
  @override
  User fromJson(Map<String, dynamic> map) {
    return User.fromJson(map);
  }

  /// 最大存储数量
  @override
  int get maxCount => 30;

  /// 最大存储期限
  /// 如果您的内容比这更旧，则从数据库中重新获取
  @override
  Duration get maxDuration => const Duration(minutes: 30);

  /// 本地存储的保存键
  /// 
  /// 不需要缓存内容控制器
  /// 需要存储设备存储
  @override
  String get saveKey => "users";

  /// 不需要缓存内容控制器
  /// 需要存储设备存储
  @override
  Map<String, dynamic> toJson(User instance) {
    return instance.toJson();
  }
}

您可以使用无序的内容进行初始化：

controller.init(contents);

保存、更新或删除内容。

但在许多情况下，您不需要这样做。因为如果您小心地确定最大值，

getContent 将为您处理这些操作。

controller.save(content);
controller.remove(id);
controller.update(id);