Использование Flutter Provider

Providerуправление статусами

Адрес загрузки: https://pub-web.flutter-io.cn/packages/provider .

Импортировать зависимости:

dependencies:
  provider: ^6.0.5

Импортируйте заголовочный файл:

import 'package:provider/provider.dart';

Применение

Создайте миксин модели ChangeNotifier. CounterКогда частное свойство изменится _count, добавьте прослушивательnotifyListeners()

class Counter with ChangeNotifier {
    
    
  int _count = 0;
  int get count => _count;

  void increment() {
    
    
    _count++;
    print(_count);

    /// 监听数据变化
    notifyListeners();
  }
}

Настройте мониторинг компонентов MultiProvider, где providersатрибут задает данные, которые необходимо привязать, то есть указанный выше Counterкласс.Данных, привязываемых здесь, может быть несколько.

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: Container(
        child: MultiProvider(
          /// 设置监听器
          providers: [
            ChangeNotifierProvider(create: (context) => Counter()),
            //ChangeNotifierProvider(create: (context) => Student()),
          ],
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),
      ),
    );
  }

Вы также можете настроить модель для мониторинга, используя ListenableProvider.value():

        child: ListenableProvider.value(
          value: Counter(),
          child: Column(
            children: [
               /// 自己添加组件 ...
            ],
          ),
        ),

Или используйте ListenableProvider<Counter>:

        child: ListenableProvider<Counter>(
          create: (_) => Counter(),
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),

Прослушайте отправку субкомпонента и нажмите кнопку, чтобы изменить данные:

      TextButton(
          /// Provider 执行修改数据
          onPressed: () => context.read<Counter>().increment(),
          child: Text("send provider"),
       ),

Прослушивайте изменение данных в дочернем компоненте. Если другие компоненты изменяют данные в счетчике, значение компонента «Текст» изменится в реальном времени:

/// 数据赋值
Text("${
      
      context.watch<Counter>().count}"),

или

/// 数据赋值
Counter counter = Provider.of<Counter>(context);
Text("${
      
      counter.count}"),

Провайдер очень прост в использовании, а динамическая привязка данных аналогична другим кроссплатформенным языкам (Vue).