Flutter Provider用法记录

3,245 阅读1分钟

为什么要用Provider

Google推荐,且用法简单,为了解决跨组件的状态共享,减少SetState的使用,使界面和逻辑分离

用法

1.添加依赖包

在pubspec.yaml中添加Provider包

dependencies:
  # State
  provider: ^3.0.0+1 //这里实际的版本号请在pub仓库中查看最新版本后填写

2.创建Model

这里实际上它承担了State的职责,但是为了和官方的State区分所以叫做model

import 'package:flutter/material.dart';

class Model with ChangeNotifier{
}

3.在main.dart中添加要用的所有Provider

1.导入包

import 'package:provider/provider.dart';

2.添加Provider

一般有两种方式,分别对应一个和多个Provider实例的时候,可以根据应用场景自行选择

1.单个Porvider,用ProviderNode

void main() {
  var providers = Providers();

//将构造号的Model对象添加进providers
  providers.provide(Provider<Model()>.value(Model));

  runApp(
    ProviderNode(
        child: MyApp(), 
        providers: providers),
    );
}

2.多个Provider,用MultiProvider

void main() {
  var providers = Providers();

//将多个Model对象添加进providers
  providers
  ..provide(Provider<Model()>.value(Model))
  ..provide(Provider<Model1()>.value(Model1))
  ..provide(Provider<Model2()>.value(Model2));

  runApp(
    MultiProvider(
        child: MyApp(), 
        providers: providers),
    );
}

3.获取并使用

Model model = Provider.of<Model>(context);