自学之路Flutter使用Provider进行状态管理

使用前的准备

首先在pubspec.yaml中配置,然后pub get,等待安装完成

我们首先创建两个比较简单的控制器,测试页面跳转之间的数据传递。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('first page')),
      body: Center(
        child: Text('first page count='),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.polymer),
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => SecondPage())),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('second page')),
      body: Center(
        child: Text('Second page count='),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () => print('+++'),
      ),
    );
  }
}

实现要求:点击FirstPage按钮跳转到SecondPage在第二个页面修改值,然后的第一个页面的值也能相应的改变

数据关联模型创建

定义数据模型,通过混入 ChangeNotifier 管理监听者(通知模式),暴露读写方法,数据改变的时候通知监听者刷新

// 定义数据模型,通过混入 ChangeNotifier 管理监听者(通知模式)
class CountModel with ChangeNotifier {
  int _count = 0;
  // 读方法
  int get counter => _count;
  // 写方法
  void increment() {
    _count++;
    notifyListeners(); // 通知监听者刷新
  }
}
数据包装

这里我们在根视图这里包装数据,这样子层级都可以使用。这里使用的是ChangeNotifierProvider.value指定Value

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
        value: CountModel(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const FirstPage(),
        ));
  }
}
数据使用

首先取出模型数据Provider.of<CountModel>(context),然后就可以通过读方法和写方法来操作,还是比较简便的。

  @override
  Widget build(BuildContext context) {
    final _counter = Provider.of<CountModel>(context);
    return Scaffold(
      appBar: AppBar(title: Text('first page')),
      body: Center(
        child: Text('first page count=${_counter.counter}'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.polymer),
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => SecondPage())),
      ),
    );
  }

这里有一个优化的地方,在我们修改数据的时候会重新走Build方法来渲染当前的页面,这里会涉及到多次渲染的问题,所以我们需要控制Flutter Widget的刷新粒度来达到优化性能的目的。

Flutter中文网

Flutter开发

  • 12
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值