Flutter状态管理插件stated的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter状态管理插件stated的使用

stated

stated 是一套整洁的工具，包括 Store、Rx、Disposable 和 ListenableBuilder。

示例代码

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

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

/// ViewModel of Counter
class CounterState {
  CounterState({
    required this.counter,
  });

  final int counter;
}

/// Counter logic
class CounterBloc extends Stated<CounterState> {
  int _counter = 0;

  void increment() {
    _counter++;
    setState();
  }

  [@override](/user/override)
  CounterState build() => CounterState(counter: _counter);
}

/// Counter presenter
class CounterWidget extends StatelessWidget {
  CounterWidget(this.bloc);

  final CounterBloc bloc;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: bloc.increment,
      child: Text('Counter: ${bloc.value.counter}'),
    );
  }
}

/// Usage
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stated',
      home: Scaffold(
        body: StatedBuilder<CounterState>(
          create: (context) => CounterBloc(),
          builder: (context, bloc, _) => CounterWidget(bloc),
        ),
      ),
    );
  }
}

更多关于Flutter状态管理插件stated的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter状态管理插件stated的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用stated插件进行状态管理的示例代码。stated是一个轻量级的状态管理库，它允许你在Flutter应用中更方便地管理和共享状态。

首先，确保你已经将stated插件添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  stated: ^最新版本号  # 替换为当前最新版本号

然后，运行flutter pub get来安装依赖。

以下是一个简单的示例，展示了如何使用stated进行状态管理：

1. 创建一个状态类

首先，我们创建一个简单的状态类，它包含一些状态数据和更新这些状态的方法。

import 'package:stated/stated.dart';

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

  void increment() {
    state = state + 1;
  }

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

2. 使用useStateNotifier Hook

接下来，我们在一个Flutter组件中使用useStateNotifier Hook来访问和监听这个状态。

import 'package:flutter/material.dart';
import 'package:stated/stated.dart';
import 'counter_state.dart';  // 假设你将状态类放在counter_state.dart文件中

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

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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterState = useStateNotifier<int>(CounterState());

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counterState.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterState.context.read(counterState.notifier).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

3. 添加一个减少按钮（可选）

你还可以添加一个减少按钮来演示decrement方法的使用。

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterState = useStateNotifier<int>(CounterState());

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counterState.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              counterState.context.read(counterState.notifier).increment();
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(width: 10),  // 添加一些间距
          FloatingActionButton(
            onPressed: () {
              counterState.context.read(counterState.notifier).decrement();
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

以上代码展示了如何使用stated插件在Flutter中进行状态管理。通过useStateNotifier Hook，你可以轻松地在组件中访问和监听状态的变化，并更新状态。

回到顶部