Flutter插件uncomplicated_flutter的介绍与使用

uncomplicated_flutter 简介

uncomplicated_flutter 是一个轻量级的 Flutter 包，它为 uncomplicated_package 提供了特定的构建器。该包非常轻量化，并且包含两个主要的部件：

1. ExplicitBuilder：用于根据显式状态（ExplicitState）构建小部件。
2. ComputedBuilder：用于处理计算状态（ComputedState），并支持三种回调函数：等待状态、错误状态和数据状态。

使用说明

ExplicitBuilder 示例

ExplicitBuilder 可以通过传递一个显式状态（ExplicitState）以及一个构建器函数来动态更新 UI。

// 定义一个显式状态
final _state = ExplicitState(0);

// 使用 ExplicitBuilder 构建 UI
ExplicitBuilder(
  state: _state, // 绑定状态
  builder: (BuildContext context, int counter) {
    return Text(
      '$counter', // 显示当前计数值
      style: Theme.of(context).textTheme.headlineMedium,
    );
  },
);

ComputedBuilder 示例

ComputedBuilder 用于处理异步操作或复杂的计算逻辑，并提供了等待、错误和数据三种状态的回调。

// 定义一个计算状态
final _state = ComputedState(
  builder: () => Future.delayed(const Duration(seconds: 1), () => 0),
);

// 使用 ComputedBuilder 处理异步逻辑
ComputedBuilder(
  state: _state, // 绑定状态
  waiting: (BuildContext context) => Center( // 等待状态
    child: CircularProgressIndicator(),
  ),
  error: (BuildContext context, dynamic error, StackTrace? stacktrace) { // 错误状态
    return Column(
      children: [
        Text(error?.toString ?? 'Something went wrong'), // 显示错误信息
        Text(stacktrace?.toString ?? ''), // 显示堆栈信息
      ],
    );
  },
  data: (BuildContext context, counter) { // 数据状态
    return Text(
      '$counter', // 显示最终结果
      style: Theme.of(context).textTheme.headlineMedium,
    );
  },
);

特性

• 易于使用：无需复杂配置，简单易懂。
• 依赖单一：仅依赖于 uncomplicated。
• 代码精简：整个库的代码量约为 300 行（uncomplicated）+ 100 行（uncomplicated_flutter），代码量少意味着潜在的 bug 更少。

开始使用

要开始使用 uncomplicated_flutter，首先需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  uncomplicated_flutter: ^版本号

然后运行 flutter pub get 获取依赖。

示例代码完整示例

以下是一个完整的示例代码，展示了如何使用 uncomplicated_flutter 来实现按钮点击计数功能。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义显式状态
  final _state = ExplicitState(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            // 使用 ExplicitBuilder 动态更新计数
            ExplicitBuilder(
              state: _state,
              builder: (context, counter) {
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _state.add(_state.value + 1), // 更新状态
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}