Flutter插件ushio的介绍与使用_Ushio是一个受 SwiftUI 启发的状态管理库

Flutter插件ushio的介绍与使用_Ushio是一个受 SwiftUI 启发的状态管理库

Ushio介绍 🧂

Ushio 是一个受 SwiftUI 启发的状态管理库。

SwiftUI 的差异

支持的功能：

• <code>@State</code> -> <code>state()</code>, <code>stateList()</code>, <code>stateMap()</code>
• <code>@StateObject</code> -> <code>stateObject()</code>
• <code>@Published</code> -> <code>published()</code>, <code>publishedList()</code>, <code>publishedMap()</code>
• <code>@EnvironmentObject</code> -> <code>environmentObject()</code>

不支持的功能：

• <code>@ObservedObject</code>

安装Flutter插件ushio

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

dependencies:
  ushio: ^x.x.x

然后运行以下命令安装：

flutter pub get

导入包：

import 'package:ushio/ushio.dart';

使用Flutter插件ushio

示例 1：简单的计数器

以下是一个使用 <code>state()</code> 的简单计数器示例。

代码实现：

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

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

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

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

class _CounterPageState extends State<CounterPage> {
  // 使用 state() 来管理状态
  final counter = state(0);

  void increment() {
    counter.value++;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ushio Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

示例 2：多计数器

以下是一个使用 <code>stateObject()</code> 和 <code>published()</code> 的多计数器示例。

代码实现：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultiCounterPage(),
    );
  }
}

// 使用 stateObject() 管理状态
class CounterManager with StateObject {
  final count = state(0);
}

class MultiCounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Counter Example'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CounterWidget(),
            CounterWidget(),
          ],
        ),
      ),
    );
  }
}

class CounterWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final manager = stateObject(CounterManager());

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Count: ${manager.count.value}'),
        ElevatedButton(
          onPressed: () {
            manager.count.value++;
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

示例 3：列表与映射

以下是一个使用 <code>stateList()</code> 和 <code>stateMap()</code> 的列表与映射示例。

代码实现：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CollectionsPage(),
    );
  }
}

class CollectionsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Collections Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ListExample(),
            MapExample(),
          ],
        ),
      ),
    );
  }
}

class ListExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final list = stateList<int>([1, 2, 3]);

    return Column(
      children: [
        Text('List: ${list.value}'),
        ElevatedButton(
          onPressed: () {
            list.value.add(4);
          },
          child: Text('Add to List'),
        ),
      ],
    );
  }
}

class MapExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final map = stateMap<String, int>({});

    return Column(
      children: [
        Text('Map: ${map.value}'),
        ElevatedButton(
          onPressed: () {
            map.value['key'] = 1;
          },
          child: Text('Add to Map'),
        ),
      ],
    );
  }
}