Uso do provedor Flutter

Providergerenciamento de status

Endereço de download: https://pub-web.flutter-io.cn/packages/provider

Dependências de importação:

dependencies:
  provider: ^6.0.5

Importe o arquivo de cabeçalho:

import 'package:provider/provider.dart';

Uso

Crie um mixin de modelo ChangeNotifier. CounterQuando as propriedades privadas forem _countalteradas, adicione um ouvintenotifyListeners()

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

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

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

Configure o monitoramento de componentes MultiProvider, onde providerso atributo define os dados que precisam ser vinculados, ou seja, a Counterclasse acima. Os dados vinculados aqui podem ser múltiplos.

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

Você também pode configurar um modelo para monitorar, usando ListenableProvider.value():

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

Ou use ListenableProvider<Counter>:

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

Ouça o envio no subcomponente e clique no botão para modificar os dados:

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

Ouça a alteração dos dados no componente filho. Se outros componentes modificarem os dados no Contador, o valor do componente Texto mudará em tempo real:

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

ou

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

O provedor é muito simples de usar e a vinculação dinâmica de dados é semelhante a outras linguagens de plataforma cruzada (Vue).