使用前的准备
首先在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的刷新粒度来达到优化性能的目的。