1. Add dependencies
provider: 6.0.5
2. Create CountModel.dart
Notice:To inherit ChangeNotifier
import 'package:flutter/cupertino.dart';
class CountModel with ChangeNotifier{
int _count;
CountModel(this._count);
void add(){
//数值增加方法
_count++;
notifyListeners();//notifyListeners()用于通知全部订阅内容提供的组件
}
get count=>_count;//get方法用于获得_count的值,订阅者通过${Provider.of<CountModel>(context).count}获得_count的值,就必须定义get方法
}
3. Create two pages and subscribe to the CountModel state management class
Page one:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'TestView.dart';
import 'model/CountModel.dart';
void main() {
// runApp(const MyApp());//初次创建项目的内容
runApp(
ChangeNotifierProvider(//应用CountModel状态管理类
create: (context)=> CountModel(0),
child: MyApp(),
)
);
/*
runApp(
MultiProvider(//想要应用多个状态管理类,就要使用MultiProvider
providers : [// 状态管理类的集合,集合元素ChangeNotifierProvider(里面是巴拉巴拉小魔仙)
ChangeNotifierProvider(
create: (context)=> CountProvider(),
),
ChangeNotifierProvider(
create: (context)=> MvvmDemoViewmodel(),
),
],
child: MyApp(),
)
*/
}
class MyApp extends StatelessWidget {
const MyApp({
super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
IconButton(
icon: Icon(Icons.accessibility_rounded),
onPressed: () {
//创建一个跳转界面,跳转到新的路由,本跳转不传任何值
Navigator.push(context, MaterialPageRoute(builder: (context) {
return TestView();
}));
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
//以下代码Provider.of<model类名>(context).属性值
//请注意,属性值在model类中必须有get方法
"${
Provider.of<CountModel>(context).count}",
style: Theme.of(context).textTheme.headline4,//字体样式
),
],
),
),
floatingActionButton: FloatingActionButton(//悬浮按钮
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
void _incrementCounter() {
//悬浮按钮点击事件
//context.read<model类名>().model中的方法;
context.read<CountModel>().add();
}
}
Page two:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'model/CountModel.dart';
class TestView extends StatefulWidget {
const TestView({
Key? key}) : super(key: key);
State<TestView> createState() => _TestViewState();
}
class _TestViewState extends State<TestView> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TestViewTite'),
),
body: Column(
children: [
TextButton(
child: Text('按钮',style: TextStyle(fontSize: 35),),
onPressed: () {
context.read<CountModel>().add();//调用CountModel中的add()方法,增加全局变量_count的值
}
)
,
Text("${
Provider.of<CountModel>(context).count}",
style: TextStyle(fontSize: 30),
)
],
),
);
}
}