如何解决如何从另一页的flutter中更改静态列表中的值?
情况
FirstScreen.dart
中的静态列表
static List<Shoe> shoeBank = [
Shoe(iN:0,b: "Red Shoe",i: "assets/nikeShoeProduct1.jpg",q: 0,c: Color(0xFFC60635)),Shoe(iN:1,b: "White Shoe",i: "assets/nikeShoeProduct2.jpg",c: Colors.white)
];
说明
我正在从列表中的int
更改项目值ThirdScreen.dart
之一。它在list
中确实发生了变化,但是在SecondScreen.dart
屏幕中没有显示更新的值吗?但是,当我一直返回到FirstScreen.dart
时,它的确在第二个屏幕中显示了更新的值。
尝试
我尝试在更新值时在ThirdScreen.dart中使用SetState。
问题
*从SecondScreen.dart
返回时如何使ThirdScreen.dart
显示更新的值,并且可能出了什么问题?
解决方法
对于 clean 解决方案,您需要制作Store
类来保存列表以及列表操作方法,然后使用provider
包例如侦听所有列表中发生的更改。
这是一个小例子:
class Store extends ChangeNotifier {
var myList = <String>[];
void add() {
myList.add('new item');
notifyListeners();
}
}
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
var pageNumber = 1;
return MaterialApp(
home: Scaffold(
body: ChangeNotifierProvider(
create: (_) => Store(),child: pageNumber == 1 ? FirstPage() : SecondPage(),),);
}
}
class FirstPage extends StatelessWidget {
const FirstPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
var store = Provider.of<Store>(context);
return Center(
child: RaisedButton(onPressed: () => store.add()),);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
var store = Provider.of<Store>(context);
return Column(
children: [
...store.myList.map((item) => Text(item)).toList(),],);
}
}
,
使用提供程序包(推荐!)
正如Nour已经指出的那样,您应该制作一个Model类,其中包含您的List<Shoe>
。一个static
变量来存储一些不断变化的数据绝不是您应该采取的方式。
我建议的步骤如下:
-
创建类似
ShoeStore
的模型类,该模型类扩展了ChangeNotifier
-
在此类中,您存储
List<Shoe>
,并编写更改此列表的方法。重要的是,在调用方法notifyListeners
的最后。 -
作为
MaterialApp
的父级,创建一个MultiProvider
小部件,在其中初始化ShoeStore
-
在此处需要访问
ShoeStore
的地方提供小部件Cosumer<ShoeStore>
。而且,您可以在builder
属性中插入您的孩子,而不是一个孩子,该属性将ShoeStore
实例作为参数。 -
阅读此great guide!,了解与Flutter Provider进行状态管理的情况。
这是您的代码的样子:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) =>
ShoeStore([Shoe(name: "Nike"),Shoe(name: "Adidas")]),child: MaterialApp(
home: Column(
children: [
Expanded(child: FirstScreen()),Expanded(child: SecondScreen()),Expanded(child: ThirdScreen())
],);
}
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,height: 100,);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<ShoeStore>(
builder: (context,shoeStore,child) => Container(
alignment: Alignment.center,color: Colors.blue,child: Text("Number of shoes: ${shoeStore.shoes.length}",style: Theme.of(context).textTheme.headline4),);
}
}
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<ShoeStore>(
builder: (context,child) => Container(
constraints: BoxConstraints.expand(),color: Colors.green,child: FlatButton(
child: Text(
"Add Shoe",style: TextStyle(color: Colors.black),onPressed: () => shoeStore.addShoe(Shoe(name: "Bugatti")),);
}
}
class ShoeStore extends ChangeNotifier {
List<Shoe> _shoes;
ShoeStore(List<Shoe> initialValue) {
_shoes = initialValue;
}
List<Shoe> get shoes => _shoes;
void addShoe(Shoe shoe) {
_shoes.add(shoe);
notifyListeners();
}
}
class Shoe {
String name;
Shoe({this.name});
}
如您所见。 FirstScreen
现在为空,您不必再在此处存储列表。
没有任何包装(不推荐!!!)
如果没有任何软件包,我会将我的App的State
注入必须读取或写入状态字段的小部件中。
这看起来像:
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List<Shoe> _shoes = [Shoe(name: "Nike"),Shoe(name: "Adidas")];
void addShoe(Shoe shoe) => setState(() {
_shoes.add(shoe);
});
List<Shoe> get shoes => _shoes;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Column(
children: [
Expanded(child: FirstScreen()),Expanded(child: SecondScreen(this)),Expanded(child: ThirdScreen(this))
],);
}
}
class SecondScreen extends StatelessWidget {
final MyAppState appState;
SecondScreen(this.appState);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,child: Text("Number of shoes: ${appState.shoes.length}",);
}
}
class ThirdScreen extends StatelessWidget {
final MyAppState appState;
ThirdScreen(this.appState);
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(),child: FlatButton(
child: Text(
"Add Shoe",onPressed: () => appState.addShoe(Shoe(name: "Bugatti")),);
}
}
class Shoe {
String name;
Shoe({this.name});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。