一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
效果:
本章目标:
1.下载全局共享的第三方
2.创建文件 里面新建共享的属性。
3.在购物车创建一个按钮 点击递增
4.在我的页面获取 递增的值 实现跨页面共享
1.安装第三方
# 全局数据共享
provider: ^3.0.0+1
2.把整个文件拖进去
import 'package:flutter/material.dart';
class Counter with ChangeNotifier{
int _count=1; //状态
int get count=>_count; //获取状态
incCount(){ //更新状态
this._count++;
notifyListeners(); //表示更新状态
}
}
3.回到 main页面 配置 初始化第三方
在面导入头文件
import 'package:flutter_app/provider/Counter.dart';
import 'package:provider/provider.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
//--------------------------------------------
return MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => Counter())
],
child: MaterialApp(
//--------------------------------------------
// home: Tabs(),
debugShowCheckedModeBanner: false,
initialRoute: '/',
onGenerateRoute: onGenerateRoute,
theme: ThemeData(
// primaryColor: Colors.yellow
primaryColor: Colors.white),
),
//--------------------------------------------
);
//--------------------------------------------
}
}
4.回到购物页面 (CartPage) 在购物车引入文件
import '../../provider/Counter.dart';
import 'package:provider/provider.dart';
5. 购物页面 (CartPage) 创建一个属性进行接收显示
回到 购物页面 (CartPage) 创建一个按钮 点击递增值 然后全局保存起来 等一下在我的页面里面显示购物车递增的值。这样实现全局数据共享(跨页面数据传递)
@override
Widget build(BuildContext context) {
//--------------------------------------------
var counterProvider = Provider.of<Counter>(context);
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){
counterProvider.incCount();
},
child: Icon(Icons.add),
),
body: Center(
child: Text("${counterProvider.count}",style: TextStyle(
fontSize: 50
)),
),
);
//--------------------------------------------
}
}
6.在我的页面(UserPage)引入 显示数据
我的页面 (UserPage) 引入头文件
import '../../provider/Counter.dart';
import 'package:provider/provider.dart';
//--------------------------------------------
var counterProvider=Provider.of<Counter>(context);
//--------------------------------------------
return Center(
//--------------------------------------------
child: Text("${counterProvider.count}",style: TextStyle(
fontSize: 50
)),
//--------------------------------------------
);