Flutter插件quds_provider的使用

简单状态管理器

此插件向Flutter开发者介绍了简单状态管理。

Flutter插件quds_provider特性

• 状态可保存和恢复。
• 可以加密保存的状态。
• 数据模型可以是整数、字符串、列表等任何类型！

如何使用Flutter插件quds_provider

创建一个提供者

class CounterProvider extends QudsProvider {
  QudsValue<int> counter = QudsValue(name: 'counter', value: 0);

  @override
  List<QudsValue> getValues() => [counter];
}

class SettingsProvider extends QudsProvider {
  QudsValue<bool> darkTheme = QudsValue(name: 'dark-theme', value: false);

  @override
  List<QudsValue> getValues() => [darkTheme];
}

// 建议在顶层声明以下提供者
CounterProvider counterProvider = CounterProvider();
SettingsProvider settingsProvider = SettingsProvider();

包裹你的应用

QudsAppController appController = QudsAppController(
  encryptionKey: 'YourKeyEncryption',
  encryptionIV: 'hiihhiih',
  providers: [counterProvider, settingsProvider],
);

Widget build(BuildContext context){
  return QudsApp(
        controller: appController,
        child:  MaterialApp(
              title: 'Quds Provider Example',
              home: HomePage()),
        );
}

如果你想观察darkTheme的变化，可以将MaterialApp包裹在QudsProviderWatcher<SettingsProvider>中：

QudsApp(
        controller: appController,
        child: QudsProviderWatcher<SettingsProvider>(
          builder: (s) => MaterialApp(
              title: 'Quds Provider Example',
              theme: ThemeData(
                primarySwatch: Colors.blue,
                brightness: s!.darkTheme.v ? Brightness.dark : Brightness.light,
              ),
              home: HomePage()),
        ));

访问并更改值

// 访问值并更改它
Widget build(BuildContext context) {
    return QudsProviderWatcher<CounterProvider>(
        builder: (p) => Scaffold(
              body: SafeArea(
                  child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Counter:'),
                    Text(p!.counter.v.toString()),
                    Row(
                      children: [
                        IconButton(
                            icon: Icon(Icons.add),
                            onPressed: () => p.counter.value++),
                        IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () => p.counter.value--),
                      ],
                    ),
                  ],
                ),
              )),
            ));
}

控制暗主题

通过使用SettingsProvider来添加控制暗主题的功能：

CheckboxListTile(
  title: Text('Dark Theme'),
  value: QudsApp.providerOf<SettingsProvider>(context)!.darkTheme.v,
  onChanged: (v) => QudsApp.providerOf<SettingsProvider>(context)!.darkTheme.v = v!,
)

QudsAppController

要保存当前状态并恢复它，可以使用QudsAppController，并且你可以加密状态以进行保护：

QudsAppController appController = QudsAppController(
  encryptionKey: 'YourKeyEncryption',
  encryptionIV: 'hiihhiih',
  providers: [counterProvider, settingsProvider],
);

void main() async {
  await appController.restoreStateInSharedPreferences();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return QudsApp(
        controller: appController,
        child: HomePage());
  }
}

// 保存应用程序状态
// appController.saveStateInSharedPreferences();

// 恢复应用程序状态
// appController.restoreStateInSharedPreferences();

QudsListNotifier

使用QudsListNotifier设置可保存状态的项目：

CarsProvider carsProvider = CarsProvider();

class CarsProvider extends QudsProvider {
  QudsValue<QudsListNotifier<String>> cars = 
    QudsValue(name: 'cars', value: QudsListNotifier<String>());
  
  @override
  List<QudsValue> getValues() => [cars];
}

/// 在提供者中注入carProvider
QudsApp(
        controller: appController,
        providers: [counterProvider, settingsProvider, carsProvider],
...
...
)

现在列表是可观察的！

class CarsViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return QudsProviderWatcher<CarsProvider>(builder: (p) {
      return ListView(
        children: [
          Row(
            children: [
              IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    p!.cars.v.add(
                        (['Toyota', 'Mercedes', 'Volvo']..shuffle()).first);
                  })
            ],
          ),
          for (var c in p!.cars.v)
            ListTile(
              title: Text(c),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () => p.cars.v.remove(c),
              ),
            )
        ],
      );
    });
  }
}

要更新carProvider的观察者：

QudsApp.providerOf<CarsProvider>(context)!.fireWatchers();