Flutter插件flutter_lid的使用_一个用于与状态通知器集成的 Flutter 库

Flutter插件flutter_lid的使用_一个用于与状态通知器集成的 Flutter 库

Lid

一个用于与状态通知器集成的 Flutter 库。它与 state_notifier 状态管理包一起工作。

它非常类似于 flutter_bloc 中的组件。

动机

已经存在一个名为 flutter_state_notifier 的包，可以与状态通知器集成，但 flutter_lid 覆盖了不同的情况。

Flutter插件flutter_lid使用

请记住此包旨在与 state_notifier 一起使用。

让我们看看如何使用 LidBuilder 将 CounterPage 小部件与 CounterState 连接起来。

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

dependencies:
  flutter_lid:
  state_notifier:

counter_lid.dart

class CounterState extends StateNotifier<int> {
  CounterState() : super(0);

  void increment() => state += 1;

  void decrement() => state -= 1;
}

main.dart

void main() => runApp(const LidCounter());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  CounterPage({Key key}) : super(key: key);

  final _counter = CounterState();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lid Counter')),
      body: LidBuilder<int>(
        stateNotifier: _counter,
        builder: (_, count) {
          return Center(
            child: Text(
              '$count',
              style: Theme.of(context).textTheme.headline1,
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            child: FloatingActionButton(
              onPressed: _counter.increment,
              child: const Icon(Icons.add),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            child: FloatingActionButton(
              onPressed: _counter.decrement,
              child: const Icon(Icons.remove),
            ),
          ),
        ],
      ),
    );
  }
}

Lid Widgets

LidBuilder 是一个 Flutter 小部件，它需要一个 stateNotifier 和一个 builder 函数。LidBuilder 处理根据新状态构建小部件。LidBuilder 非常类似于 StreamBuilder，但具有更简单的 API 以减少样板代码。builder 函数可能会被多次调用，并且应该是一个纯函数，根据状态返回一个部件。

LidBuilder<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

对于 builder 函数何时调用的细粒度控制，可以提供 buildWhen 参数。如果省略，则默认情况下，如果前一个状态与当前状态不同，则为 true，否则为 false。

LidBuilder<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  buildWhen: (previousState, state) {
    // 返回 true/false 以确定是否应使用状态重建小部件
  },
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

还可以在状态变化之间进行动画。

LidBuilder<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  animate: true, // 设置为 `true`，将在部件更改时执行淡入动画。
  transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder, // 可以在这里修改默认的淡入动画。
  duration: Duration(milliseconds: 300), // 设置动画持续时间。
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

LidListener 是一个 Flutter 小部件，它接受一个 LidWidgetListener 并需要一个 stateNotifier，并在状态通知器的状态发生变化时调用 listener。它应该用于每次状态变化时需要发生的操作，如导航、显示 SnackBar、显示 Dialog 等…

listener 只会在每次状态变化时被调用一次（不包括 initialState），不像 LidBuilder 中的 builder，并且是一个 void 函数。

LidListener<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  listener: (context, state) {
    // 根据状态通知器的状态执行某些操作
  },
  child: const SizedBox(),
)

为了对 listener 函数何时调用进行细粒度控制，可以提供可选的 listenWhen。listenWhen 接受前一个状态和当前状态并返回一个布尔值。如果 listenWhen 返回 true，则 listener 将使用 state 被调用。如果 listenWhen 返回 false，则 listener 不会被调用。

LidListener<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  listenWhen: (previousState, state) {
    // 返回 true/false 以确定是否应调用 listener 与状态
  },
  listener: (context, state) {
    // 根据状态通知器的状态执行某些操作
  },
  child: const SizedBox(),
)

MultiLidListener 是一个 Flutter 小部件，它可以将多个 LidListener 小部件合并成一个。MultiLidListener 改善了可读性并消除了嵌套多个 LidListener 的需求。通过使用 MultiLidListener，我们可以从：

LidListener<StateType>(
  stateNotifier: stateNotifierA, // 提供状态通知器实例
  listener: (context, state) {},
  child: LidListener<StateType>(
    stateNotifier: stateNotifierB, // 提供状态通知器实例
    listener: (context, state) {},
    child: LidListener<StateType>(
      stateNotifier: stateNotifierC, // 提供状态通知器实例
      listener: (context, state) {},
      child: ChildA(),
    ),
  ),
)

到：

MultiLidListener(
  listeners: [
    LidListener<StateType>(
      stateNotifier: stateNotifierA, // 提供状态通知器实例
      listener: (context, state) {},
    ),
    LidListener<StateType>(
      stateNotifier: stateNotifierB, // 提供状态通知器实例
      listener: (context, state) {},
    ),
    LidListener<StateType>(
      stateNotifier: stateNotifierC, // 提供状态通知器实例
      listener: (context, state) {},
    ),
  ],
  child: ChildA(),
)

LidConsumer 暴露了一个 builder 和 listener 以便响应新的状态。LidConsumer 类似于嵌套的 LidListener 和 LidBuilder，但减少了所需的样板代码。LidConsumer 只应在必要时使用，即在状态通知器的状态变化时既需要重建 UI 又需要执行其他反应。

LidConsumer<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  listener: (context, state) {
    // 根据状态通知器的状态执行某些操作
  },
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

可以实现可选的 listenWhen 和 buildWhen 以获得更精细的控制，何时调用 listener 和 builder。listenWhen 和 buildWhen 将在每个 state 变化时被调用。它们各自接受前一个 state 和当前 state 并必须返回一个 bool，以确定是否调用 builder 和/或 listener 函数。前一个 state 将初始化为 state_notifier 的状态，当 LidConsumer 初始化时。listenWhen 和 buildWhen 是可选的，如果没有实现，它们将默认为 true。

LidConsumer<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  listenWhen: (previous, current) {
    // 返回 true/false 以确定是否调用 listener 与状态
  },
  listener: (context, state) {
    // 根据状态通知器的状态执行某些操作
  },
  buildWhen: (previous, current) {
    // 返回 true/false 以确定是否重建带有状态的小部件
  },
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

也可以在状态变化之间进行动画。

LidConsumer<StateType>(
  stateNotifier: stateNotifier, // 提供状态通知器实例
  animate: true, // 设置为 `true`，将在部件更改时执行淡入动画。
  transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder, // 可以在这里修改默认的淡入动画。
  duration: Duration(milliseconds: 300), // 设置动画持续时间。
  listener: (context, state) {
    // 根据状态通知器的状态执行某些操作
  },
  builder: (context, state) {
    // 基于状态通知器的状态返回部件
  }
)

LidSelector

LidSelector 是一个 Flutter 小部件，它类似于 LidBuilder，但允许开发人员通过选择基于当前 stateNotifier 的新值来过滤更新。如果选择的值没有改变，则会阻止不必要的构建。选择的值必须是不可变的，以便 LidSelector 能够准确地确定是否应再次调用 builder。

LidSelector<StateType, SelectedState>(
  selector: (state) {
    // 基于提供的状态返回选定的状态。
  },
  builder: (context, state) {
    // 基于选定的状态返回部件。
  },
)

也可以在状态变化之间进行动画。

扩展

有三个扩展 -> LidBuilder, LidListener 和 LidConsumer。

使用方法非常简单：

// 同样是 LidBuilder
stateNotifier.toLidBuilder(  
  buildWhen: (previousState, state) {},
  builder: (context, state) {},
);

// 同样是 LidListener
stateNotifier.toLidListener(  
  listenWhen: (previousState, state) {},
  listener: (context, state) {},
  child: const SizedBox(),
);

// 同样是 LidConsumer
stateNotifier.toLidConsumer(
  listenWhen: (previous, current) {},
  listener: (context, state) {},
  buildWhen: (previous, current) {},
  builder: (context, state) {}
);

// 同样是 LidSelector
stateNotifier.toLidSelector<bool>(
  selector: (state) {},
  builder: (context, state) {},
),