Flutter UI组件库插件uic的使用

UIC (UI Components)

UIC 是一组高级 Flutter UI 组件和独立小部件，用于更轻松地实现常用 UI 功能。

组件：

• StatefulData - 一个可监听的数据模型及其伴随的小部件，用于根据数据状态显示数据。
• ResponsiveLayout - 允许轻松构建适合当前表单因子的布局。
• CheckboxUic - 增强版的复选框，维护其状态，具有标题，并可以在每个状态下显示额外描述。
• ListUic - ListView 的包装器，实现了相关的数据加载和状态管理逻辑。
• LoginUic - 一个登录表单，隐藏了大多数 UI 逻辑，但仍可自定义以适应您的应用设计。
• ProgressUic - ProgressIndicator 的包装器，并带有额外文本。

小部件：

• ActionButton - Material 按钮的包装器，管理操作的状态，并在操作执行时显示进度视图。
• Deck - 显示堆叠卡片，可以展开和折叠。
• InlineTextField - 可内联编辑内容的文本视图。
• StepIndicator - 简单但可定制的步骤/页面指示器。

StatefulData

数据加载和状态通知

StatefulData 是一个包装您的数据的模型，它处理数据加载并通知其监听器数据状态的变化。

StatefulData 模型

final yourStatefulData = StatefulData<YourDataType>(
  loader: () => loadData(),
);

一旦创建了 StatefulData 对象，它会使用提供的 loader 函数异步加载数据，并在数据加载状态变化时通知监听器。

您可以控制是否立即开始数据加载：

final yourStatefulData = StatefulData<YourDataType>(
  loader: () => loadData(),
  startLoading = false,
);

在这种情况下，您可以随时通过调用 loadData() 方法来加载数据：

yourStatefulData.loadData();

此方法还可以用于在任何时候刷新数据。

如果您的数据来自流，可以使用 StatefulData.watch 构造函数：

final yourStatefulData = StatefulData<YourDataType>.watch(
  source: () => yourDataStream,
);

在这种情况下，您的数据将自动更新。

StatefulData 支持的数据状态

StatefulDataView 小部件

通常与 StatefulData 一起使用的是 StatefulDataView。这是一个小部件，监听提供的 StatefulData 对象，并根据当前数据状态更新 UI。

[@override](/user/override)
Widget build(BuildContext context) {
  return StatefulDataView<YourDataType>(
    statefulData: yourStatefulData,
    builder: (context, data) {
      return YourDataView(data: data);
    }
  );
}

在 builder 参数中指定一个返回数据视图的函数，当状态变为 ready 时调用。

可选参数

StatefulDataView 会在数据状态变化时重建，并根据当前状态显示数据视图或这些视图之一。

如果缺少这些参数，则会显示内置默认视图。

查看 demo app 了解如何使用 StatefulData 模型和 StatefulDataView 小部件的示例。

CheckboxUic

增强版复选框

增强版但仍然简单的复选框小部件。与原始复选框小部件不同，CheckboxUic 维护其状态。它还有标题，并且可以在每个状态下显示额外描述。

使用

导入包：

import 'package:uic/checkbox_uic.dart';

简单使用 CheckboxUic：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: CheckboxUic(
      initialState: true,
      title: '显示附加描述',
      description: '这是勾选状态的描述。',
      descriptionUnchecked: 'CheckboxUic 可以显示描述文本，该文本可以针对每个状态（勾选和未勾选）单独设置。',
      onChanged: (value) {
        print('$value');
      },
    ),
  );
}

查看更多示例在 demo app。

ListUic

列表组件

几乎每个应用都有显示项目列表的屏幕。这看似简单的任务往往需要实现很多相关功能。所有这些样板代码可以通过 ListUic 小部件简化。

特性：

• 下拉刷新手势以重新加载列表数据
• 分页（无限滚动）在列表末尾滚动时加载下一部分数据
• 初始数据加载进度指示器
• 空数据的独立视图
• 错误视图
• 加载更多项目的进度指示器
• 加载数据失败时显示 Snack Bar

使用

导入包：

import 'package:uic/list_uic.dart';

在页面状态中添加 ListUicController：

class _MyHomePageState extends State<MyHomePage> {
  ListUicController<int> _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = ListUicController<int>(
      onGetItems: (int page) => _getItems(page),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListUic<int>(
        controller: _controller,
        itemBuilder: (item) {
          return ListTile(
            title: Text('标题 ${item}'),
            subtitle: Text('副标题 ${item}'),
          );
        },
      ),
    );
  }

  Future<List<int>> _getItems(int page) async {
    // 实现获取项目列表的逻辑
  }
}

实现一个返回项目列表的函数：

Future<List<int>> _getItems(int page) async {
  // 实现获取项目列表的逻辑
}

阅读文档以了解可用的自定义选项。

也可以在 demo app 中检查 ListUic 小部件的详细使用情况。

LoginUic

登录表单

一个登录表单，封装了大多数 ‘登录’ 功能的 UI 逻辑，但仍高度可定制以适应您的应用设计。

特性：

• 显示标准的登录表单，包含用户名和密码字段及 ‘登录’ 按钮
• 实现基本的用户名和密码验证逻辑
• 提供一个回调以执行登录操作
• 处理登录错误
• 允许自定义表单 UI 以适应您的应用设计

使用

导入包：

import 'package:uic/login_uic.dart';

在 widget 树中添加 LoginUic 小部件：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: LoginUic(
        onSignIn: (username, password) => _signIn(username, password),
        onSignInCompleted: (context) => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => LoginUicSignedInScreen(title: 'LoginUic Demo'),
          ),
        ),
      ),
    ),
  );
}

Future<void> _signIn(String username, String password) async {
  // 实现登录逻辑
}

实现一个根据您的业务逻辑执行登录操作的函数：

Future<void> _signIn(String username, String password) async {
  // 实现登录逻辑
}

LoginUic 所需参数：

在 demo app 和包文档中查看完整的 LoginUic 使用示例。

ActionButton

操作按钮

Material 按钮的包装器，封装了执行操作时本地状态的管理，并在操作执行时更新按钮内容以显示进度视图。

使用

导入包：

import 'package:uic/widgets.dart';

您可以像使用普通按钮小部件一样使用 ActionButton。但是，您应该在 action 属性中提供操作函数，而不是 onPressed。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: ActionButton(
        action: () async {
          return Future.delayed(Duration(seconds: 5));
        },
        child: Text('按钮标题'),
      ),
    ),
  );
}

ActionButton 额外参数

在 demo app 和包文档中查看完整的 ActionButton 使用示例。

Deck

卡片堆叠

显示堆叠的子小部件（通常是卡片），最初只有标题可见。每个 Deck 项都可以展开和折叠。

使用

导入包：

import 'package:uic/widgets.dart';

通常，您将在 Stack 中使用 Deck，其中第一层是您的主要内容，而 Deck 将覆盖内容。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Stack(
      children: [
        YourMainWidget(),
        Align(
          alignment: Alignment.bottomCenter,
          child: Deck(
            items: [
              DeckItem(
                child: YourFirstItemCollapsedView(),
                childExpanded: YourFirstItemExpandedView(),
              ),
              DeckItem(
                child: YourSecondItemCollapsedView(),
                childExpanded: YourSecondItemExpandedView(),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

您必须提供 DeckItem 对象的列表，这些对象定义了 Deck 项目的折叠和展开外观。

Deck 额外参数

在 demo app 和包文档中查看完整的 Deck 使用示例。

InlineTextField

内联文本字段

使文本视图可编辑。在视图模式下显示普通的 Text 小部件（或自定义视图）。双击时切换到编辑模式，允许用户内联编辑文本。

使用

导入包：

import 'package:uic/widgets.dart';

简单的 InlineTextField 使用：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Row(
      children: [
        Text('您可以 '),
        InlineTextField(
          text: '编辑我',
          style: Theme.of(context).textTheme.bodyText1.copyWith(
            color: Colors.lightBlueAccent,
          ),
          onEditingComplete: (value) {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              backgroundColor: Theme.of(context).accentColor,
              content: Text(value),
            ));
          },
        ),
        Text(' 在这里'),
      ],
    ),
  );
}

在 demo app 和包文档中查看更多可用选项的 InlineTextField 示例。

StepIndicator

步骤指示器

简单但可定制的步骤/页面指示器。可用于显示滑块和轮播中的当前项目，或流程中的当前页面，用户必须经过一系列屏幕。

使用

导入包：

import 'package:uic/widgets.dart';

简单的 StepIndicator 使用：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: StepIndicator(
        selectedStepIndex: 2,
        totalSteps: 5,
      ),
    ),
  );
}