Flutter功能探索插件deex的使用

Flutter功能探索插件deex的使用

Flutter功能探索插件deex的安装

首先，在你的 pubspec.yaml 文件中添加 Deex 插件：

dependencies:
  deex: # 最新版本

然后运行以下命令以获取依赖项：

flutter pub get

Flutter功能探索插件deex的使用

导入 Deex 库：

import 'package:deex/deex.dart';

Rebuilding Widgets

Widget

Deex 小部件使用户界面能够响应控制器状态的变化。每当观察到的状态发生变化时，UI 将自动重建。

Deex(
  () => Text('${controller.count.value}'),
),

按钮点击事件会触发状态更新：

onPressed: controller.increment,

Controller

Controller 扩展了 DeexStore 类，并包含可观察的状态变量。通过 .obs 扩展来使变量可观察。

class Controller extends DeexStore {
  var count = 0.obs;
  void increment() => count++;
}

类似于Deex，但管理本地状态

在构造函数中传递初始数据。这对于简单的本地状态（如开关、可见性、主题、按钮状态等）非常有用。

DeexValue((data) => Switch(
    value: data.value,
    onChanged: (flag) => data.value = flag,
  ),
  false.obs,
),

Rebuilding Widgets with State

Widget

在这个例子中，Deex 小部件每次状态变化时都会重建按钮。按钮文本基于 RequestController 的当前状态。

Deex(() {
  return ElevatedButton(
    onPressed: stateController.sendRequest,
    child: Text(
      stateController.state.value.message,
    ),
  );
}),

Controller

RequestController 管理请求状态。它设置了初始状态，并在发送请求时将状态更改为“加载”，并在模拟延迟后将状态更改为“完成”。

class RequestController extends DeexStore {
  final Rx<RequestState> state = Rx<RequestState>(InitialRequestState());

  void sendRequest() {
    _setLoadingState();
    _simulateRequest()
        .then((data) => _setCompletedState(data))
        .catchError((error) => _setErrorState(error));
  }

  void _setLoadingState() {
    state.value = LoadingRequestState();
  }

  void _setCompletedState(dynamic data) {
    state.value = CompletedRequestState(data);
  }

  void _setErrorState(dynamic error) {
    state.value = ErrorRequestState(error.toString());
  }

  Future<dynamic> _simulateRequest() {
    return Future.delayed(const Duration(seconds: 2), () {
      return {'data': 'Hello World!'};
    });
  }
}

States

状态表示请求的不同阶段。每个状态都有一个描述其状态的消息。

abstract class RequestState {
  final String message;
  RequestState(this.message);
}

class InitialRequestState extends RequestState {
  InitialRequestState() : super('Request State');
}

class LoadingRequestState extends RequestState {
  LoadingRequestState() : super('Loading...');
}

class CompletedRequestState extends RequestState {
  final dynamic data;
  CompletedRequestState(this.data) : super('Request completed');
}

class ErrorRequestState extends RequestState {
  ErrorRequestState(String message) : super('Error: $message');
}

DeexConsumer

DeexConsumer 是一个 Flutter 小部件，用于高效地管理和响应 DeexStore 中的状态变化。它监听来自存储器的更新，并根据新的状态重建其 UI。这提供了一种方便的方法来分离业务逻辑与 UI。

优点

• 关注点分离：DeexConsumer 帮助保持业务逻辑和 UI 的清晰分离，使代码更易于维护和理解。
• 反应式更新：通过监听 DeexStore 的变化，DeexConsumer 确保 UI 总是反映最新的状态，提供反应式编程模型。
• 选择性监听：DeexConsumer 允许你使用 listenIds 参数指定要监听的状态部分，这有助于优化性能，减少不必要的重建。
• 简易状态管理：它简化了 Flutter 应用程序中的状态管理，提供了一种简单一致的方式来处理状态变化并相应地更新 UI。

使用示例

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

class CounterStore extends DeexStore {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    update();
  }
}

class CounterPage extends StatelessWidget {
  final CounterStore store = CounterStore();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: DeexConsumer<CounterStore>(
          store: store,
          builder: (context, store) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('You have pushed the button this many times:'),
                Text('${store.count}', style: Theme.of(context).textTheme.headline4),
              ],
            );
          },
          listener: (store) {
            print('Store updated: ${store.count}');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: store.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterPage(),
  ));
}

Notifiers

ListNotifierSingle

ListNotifierSingle 是一个通知器，允许你添加、删除和检查单个监听器。它适用于仅需通知单个监听器的场景。

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

class _MyWidgetState extends State<MyWidget> {
  final ListNotifierSingle _notifier = ListNotifierSingle();

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

  [@override](/user/override)
  void dispose() {
    _notifier.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _notifier.refresh();
      },
      child: Text('Refresh'),
    );
  }
}

ListNotifierGroup

ListNotifierGroup 是一个通知器，支持按唯一 ID 组织的多个监听器的管理。它适用于需要按特定类别或组管理多个监听器的场景。

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

class _MyGroupWidgetState extends State<MyGroupWidget> {
  final ListNotifierGroup _notifier = ListNotifierGroup();

  [@override](/user/override)
  void initState() {
    super.initState();
    _notifier.addListenerId('button1', () {
      setState(() {});
    });
  }

  [@override](/user/override)
  void dispose() {
    _notifier.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            _notifier.refreshGroup('button1');
          },
          child: Text('Refresh Button 1'),
        ),
        ElevatedButton(
          onPressed: () {
            _notifier.refreshGroup('button2');
          },
          child: Text('Refresh Button 2'),
        ),
      ],
    );
  }
}