Flutter UI状态管理插件uistate的使用

Flutter UI状态管理插件uistate的使用

UIState 是一种在 Flutter 小部件中表示 UI 状态的最简洁方法。

界面展示

加载中	成功	失败

使用方法

通过 Provider 获取数据的实时流表示：

UIState<String> state = Provider.of<ViewModel>(context).state;

受到 Kotlin 的内联 switch 启发，when 方法返回当前状态的相应小部件：

state.when(
    success: (event) => Text(event.value),
    failure: (event) => Text('Error: ${event.errorMessage}'),
    loading: (event) => CircularProgressIndicator(),
)

构建方法示例

[@override](/user/override)
Widget build(BuildContext context) {
  UIState<String> state = Provider.of<ViewModel>(context).state;

  return Scaffold(
    body: Container(
      margin: EdgeInsets.all(20),
      child: Center(
        child: state.when(
          success: (event) => Text(event.value),
          failure: (event) => Text('Error: ${event.errorMessage}'),
          loading: (event) => CircularProgressIndicator(),
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.adjust_sharp),
      onPressed: () {
        Provider.of<ViewModel>(context, listen: false).fetchUser();
      },
    ),
  );
}

ChangeNotifier (ViewModel) 一侧

state 变量将反映数据请求的加载/失败/成功状态：

class ViewModel extends ChangeNotifier {
  final UsernameRepository repository;
  ViewModel(this.repository);

  UIState<String> state = Loading();

  fetchUser() async {
    try {
      String username = await repository.getUsername();
      state = Success(username);
    } catch (error) {
      state = Failure(error.toString());
    }

    notifyListeners();
  }
}

安装

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

flutter pub add uistate

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';
import 'package:uistate/uistate.dart';
import 'package:uistate_example/username_repository.dart';
import 'package:uistate_example/viewmodel.dart';

void main() {
  runApp(MultiProvider(providers: [
    ChangeNotifierProvider<ViewModel>.value(value: ViewModel(UsernameRepository())),
  ], child: MyApp()));
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'UI State 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter 示例首页'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    UIState<String> state = Provider.of<ViewModel>(context).state;

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(20),
        child: Center(
          child: state.when(
            success: (event) => successWidget(event.value),
            failure: (event) => failureWidget(event.errorMessage),
            loading: (event) => loadingSpinner(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<ViewModel>(context, listen: false).fetchUser();
        },
        tooltip: 'Increment',
        child: Icon(Icons.adjust_sharp),
      ), // 这个尾随逗号使自动格式化更美观
    );
  }

  CircularProgressIndicator loadingSpinner() => CircularProgressIndicator();

  final style = const TextStyle(fontSize: 30, color: Colors.white);

  successWidget(String string) {
    return Container(
      padding: EdgeInsets.all(10),
      color: Colors.green,
      child: Text(string, style: style),
    );
  }

  failureWidget(String string) {
    return Container(
      padding: EdgeInsets.all(10),
      color: Colors.red,
      child: Text(string, style: style),
    );
  }
}