Men的博客

欢迎光临！

0%

Flutter Provider

发表于 更新于

功能：
1.数据共享
2.局部刷新

api详解
暴漏一个值

1
2
3
4
Provider(
  create: (_) => new MyModel(),
  child: ...
)

读取一个值
MyModel yourValue = Provider.of(context)
同理：暴漏和读取多个值

Provider 最基础的provider,它会获取一个值并将它暴露出来
ListenableProvider 用来暴露可监听的对象，该provider将会监听对象的改变以便及时更新组件状态
ChangeNotifierProvider ListerableProvider依托于ChangeNotifier的一个实现，它将会在需要的时候自动调用ChangeNotifier.dispose方法
ValueListenableProvider 监听一个可被监听的值，并且只暴露ValueListenable.value方法
StreamProvider 监听一个流，并且暴露出其最近发送的值
FutureProvider 接受一个Future作为参数，在这个Future完成的时候更新依赖

watch

flutter 中 Builder 详解
Builder的builder方法中我们传入了一个context，这个context是当前builder的context，我们可以通过这个context来获取到一些平时比较难获取到的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Widget build(BuildContext context) {
  return Scaffold(
    body: Builder(
      builder: (BuildContext context) {
        return Center(
          child: TextButton(
            onPressed: () {
              print(Scaffold.of(context).hasAppBar);
            },
            child: Text('TextButton'),
          ),
        );
      },
    ),
  );
}

StatefulBuilder 有状态的builder
LayoutBuilder可以提供父widget的大小。

StreamBuilder 类本质是一种Widget。可以监听流的状态
小部件重建是由每个交互调度的，使用[State.setState]，
StreamBuilder<List>(
stream: noteHelper.watchNotes(folder),
initialData: const [],
builder: (context, snapshot) {
})

FutureBuilder

AnimatedBuilder
使用预构建的子组件可以提高效率。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
AnimatedBuilder(
      animation: _controller,
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        child: const Center(
          child: Text('Whee!'),
        ),
      ),
      builder: (BuildContext context, Widget? child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
    );

Flutter MVC设计模式
Model (数据库中数据)
View （页面Widget）
Controller （页面逻辑控制）

Flutter 设计思路
flutter_riverpod
hooks_riverpod
go_router
freezed

基于riverpod的MVVM设计模式
Model 数据对象
View 即Widget
ViewModel 即provider + StateNotifer，支持数据变化和业务逻辑

flutter学习：
freezed
riverpod_generator
go_router_builder

go_router
push、go、modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//用户角色
@freezed
class UserRole with _$UserRole {
  const factory UserRole.admin() = Admin;
  const factory UserRole.user() = User;
  const factory UserRole.guest() = Guest;
  const factory UserRole.none() = None;
}
   final userRole = roleListener.read();
    final redirectTo = userRole?.maybeMap(
      admin: (_) => null,
      user: (_) {
        if (state.location == AdminRoute.path) return HomeRoute.path;
        return null;
      },
      orElse: () {
        if (state.location != HomeRoute.path) return HomeRoute.path;
        return null;
      },
    );