Flutter改变另一个页面的状态（组件状态共享）
1.创建Flutter项目
建议使用命令来创建Flutter项目，因为图像化界面创建速度过慢。
有下面两种创建Flutter项目的方式，我创建的是Android版的Flutter项目
flutter 创建Andorid版本命令语句：flutter create -i objc -a java new_app(项目名)
flutter 创建kotlin版本命令语句：flutter create -i objc -a kotlin new_app(项目名)
2.添加provider依赖
在pubspec.yaml文件加入依赖：
provider: ^3.1.0+1
3.创建CartModel.dart文件，并在此文件编写CartModel类
这个CartModel类就相当于一个中转站，其中它的strAll变量是可以共享的
String get strAllValue => strAll; 表示把strAll这个变量暴露出来给另外的页面使用，另外的页面就要用strAllValue这个变量了，而不使用strAll变量
notifyListeners(); 这个代码的意思是通知其它页面去更新状态
import 'package:flutter/cupertino.dart';
class CartModel with ChangeNotifier{
String strAll = "";
String get strAllValue => strAll;
void addStr(String str1,String str2,String str3,String str4,String str5){
strAll = str1 + str2 + str3 + str4 + str5;
notifyListeners();
}
}
4.创建FirstPage.dart文件和SecondPage.dart文件，并分别编写FirstPage类和SecondPage类
FirstPage.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_CartModel/CartModel.dart';
import 'SecondPage.dart';
import 'CartModel.dart';
class FirstPage extends StatefulWidget{
@override
FirstPageState createState() => FirstPageState();
}
class FirstPageState extends State{
TextEditingController tec1 = new TextEditingController();
TextEditingController tec2 = new TextEditingController();
TextEditingController tec3 = new TextEditingController();
TextEditingController tec4 = new TextEditingController();
TextEditingController tec5 = new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FirstPage"),
),
body: ListView(
children: [
Center(
child: Padding(
padding: EdgeInsets.only(left: 15,right: 15),
child: TextField(
cursorWidth: 1 ,
controller: tec1,
),
)
),
Center(
child: Padding(
padding: EdgeInsets.only(left: 15,right: 15),
child: TextField(
cursorWidth: 1 ,
controller: tec2,
),
)
),
Center(
child: Padding(
padding: EdgeInsets.only(left: 15,right: 15),
child: TextField(
cursorWidth: 1 ,
controller: tec3,
),
)
),
Center(
child: Padding(
padding: EdgeInsets.only(left: 15,right: 15),
child: TextField(
cursorWidth: 1 ,
controller: tec4,
),
)
),
Center(
child: Padding(
padding: EdgeInsets.only(left: 15,right: 15),
child: TextField(
cursorWidth: 1 ,
controller: tec5,
),
)
)
],
),
floatingActionButton: Consumer(
builder: (context, CartModel cartModel, child) => FloatingActionButton(
onPressed: (){
cartModel.addStr(tec1.text,tec2.text,tec3.text,tec4.text,tec5.text);
},
child: child,
),
child: Icon(Icons.add),
),
);
}
} SecondPage.dart
其中final cartModel = Provider.of
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_CartModel/CartModel.dart';
class SecondPage extends StatefulWidget{
@override
SecondPageState createState() => SecondPageState();
}
class SecondPageState extends State{
@override
Widget build(BuildContext context) {
final cartModel = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: Text("SecondPage"),
),
body: Center(
child: Text(
'从FirstPage中改变SecondPage中的状态:\n\n ${cartModel.strAllValue}',
style: TextStyle(fontSize: 20),
),
),
);
}
} 5.创建MainPage.dart文件，并编写MainPage类
这是整个App的主页面，里边有两个按钮，第一个按钮跳转到FirstPage页面，第二个按钮跳转到SecondPage页面
第一个页面的右下角有个圆形按钮，点击它以后会改变第二个页面的状态
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test_CartModel/FirstPage.dart';
import 'SecondPage.dart';
class MainPage extends StatefulWidget{
@override
MainPageState createState() => MainPageState();
}
class MainPageState extends State{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '组件状态共享demo',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('组件状态共享demo'),
),
body: ListView(
children: [
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: (){
Navigator.push(
context,
//动态路由，可以传递参数
CupertinoPageRoute(
builder: (context) => FirstPage(),
),
);
},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.only(left: 100,top: 10,right: 100,bottom: 10),
child: const Text(
'跳转到FirstPage',
style: TextStyle(fontSize: 20)
),
)
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: (){
Navigator.push(
context,
//动态路由，可以传递参数
CupertinoPageRoute(
builder: (context) => SecondPage(),
),
);
},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.only(left: 87,top: 10,right: 87,bottom: 10),
child: const Text(
'跳转到SecondPage',
style: TextStyle(fontSize: 20)
),
)
),
)
],
),
),
);
}
}
6.修改main.dart文件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_CartModel/CartModel.dart';
import 'package:test_CartModel/MainPage.dart';
void main(){
final cartModel = CartModel();
runApp(
Provider.value(
value: "",
child: ChangeNotifierProvider.value(
value: cartModel,
child: MyApp(),
)
)
);
}
final ThemeData defaultTheme = ThemeData(
primaryColor: Colors.lightBlue
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '',
theme: defaultTheme,
home: MainPage(),
);
}
}
7.测试
