从一个屏幕移动到另一个屏幕时如何不丢失列表中的数据？
Posted
技术标签:
【中文标题】从一个屏幕移动到另一个屏幕时如何不丢失列表中的数据？【英文标题】：How to not lose a data from the list when going from one screen to another screen in flutter? 【发布时间】：2020-12-06 04:53:50 【问题描述】：我有一个类ViewTotalItemProvider，它扩展了ChangeNotifier。在类里面，有一个这样的列表。
class ViewTotalItemProvider extends ChangeNotifier
List<CartPlantLists> cartPlantList3 = [];
此外，还有 3 个屏幕，包括类，PlantFeatureScreen1、ParticularPlant2、CartDetais3。所有都是有状态的小部件，我在第二个屏幕中添加了一些项目，即ParticularPlant2 类。
当我尝试在第二个屏幕和第三个屏幕中显示列表中的项目时，它可以工作。
但是该值不会在 firstScreen 中更新，即PlantFeatureScreen1。但是，当我重新加载应用程序时，它会显示更新后的值。
为什么会这样？我该如何解决？
代码 ViewTotalItemProvider
List<CartPlantLists> cartPlantList3 = [];
class ViewTotalItemProvider extends ChangeNotifier
addQuantity(index)
cartPlantList3[index].qu++;
notifyListeners();
subtrachQuantity(index)
cartPlantList3[index].qu--;
notifyListeners();
firstScreen PlantFeatureScreen1（这里我想更新最后一个小部件中的值）
class PlantFeatureScreen1 extends StatefulWidget
@override
_PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
class _PlantFeatureScreen1State extends State<PlantFeatureScreen1>
@override
Widget build(BuildContext context)
return ChangeNotifierProvider<ViewTotalItemProvider>(
create: (context) => ViewTotalItemProvider(),
child:Builder(builder: (context)
return Column(
children: <Widget>[
TopAppBar(),
Expanded(
flex: 1,
child: Align(
alignment: Alignment(-1, 0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Text(
"Plants",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),
),
),
),
),
Expanded(
flex: 5,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
),
child: DefaultTabController(
length: 5,
child: Column(
children: [
Container(
height: 50,
width: double.infinity,
child: TabBar(
isScrollable: true,
tabs: ourAllLists.tabMaker(),
),
),
Container(
height: 317,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white),
child: TabBarView(
children: ourAllLists.tabViewerMaker(context),),),
],
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Container(
alignment: Alignment.bottomRight,
height: 120,
width: double.infinity,
child: Stack(
overflow: Overflow.visible,
children: [
Container(
height: 70,
width: 105,
decoration: BoxDecoration(
color: Color(0xFF96CA2D),
borderRadius: BorderRadiusDirectional.horizontal(
end: Radius.circular(32),
start: Radius.circular(32))),
child: Icon(FontAwesomeIcons.shoppingBag,color:Colors.white,size:30),
),
Positioned(
// top: 0,
bottom: 50,
right: 0,
child: Consumer<ViewTotalItemProvider>(
builder: (context, value, child)
return Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Color(0xFF96CA2D),width: 4)
),
child: Center(child: Text(ourAllLists.totalquantity().toString(),style:TextStyle(fontSize: 20,color: Color(0xFF96CA2D)))),
);
),
),
],
),
),
)
],
);
)
);
秒屏ParticularPlant2
class ParticularPlant2 extends StatefulWidget
final indexNumber;
ParticularPlant2(@required this.indexNumber);
@override
_ParticularPlant2State createState() => _ParticularPlant2State();
class _ParticularPlant2State extends State<ParticularPlant2>
@override
Widget build(BuildContext context)
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TopAppBar(),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadiusDirectional.only(
bottomStart: Radius.circular(50),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ourAllLists
.mainListAllPlantDetailsList1[widget.indexNumber].pN,
style: kPlantNameStyle,
),
Text(
ourAllLists
.mainListAllPlantDetailsList1[widget.indexNumber].ca
.toUpperCase(),
style: TextStyle(
fontSize: 15,
),
),
Text(
"\$" +
ourAllLists
.mainListAllPlantDetailsList1[widget.indexNumber]
.pr
.toString(),
style: kItemPrice,
),
SizedBox(height: 100),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50)),
child: Icon(
FontAwesomeIcons.flag,
color: Color(0xFF9DCD3C),
),
),
SizedBox(
height: 50,
),
FlatButton(
onPressed: ()
final tile = cartPlantList3.firstWhere(
(item) =>
item.pN ==
ourAllLists
.mainListAllPlantDetailsList1[
widget.indexNumber]
.pN,
orElse: () => null);
if (tile != null)
else
cartPlantList3.add(
CartPlantLists(
quantity: 1,
plantName: ourAllLists
.mainListAllPlantDetailsList1[
widget.indexNumber]
.pN,
category: ourAllLists
.mainListAllPlantDetailsList1[
widget.indexNumber]
.ca,
price: ourAllLists
.mainListAllPlantDetailsList1[
widget.indexNumber]
.pr,
),
);
print(cartPlantList3.length);
,
child: Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xFF9DCD3C),
borderRadius: BorderRadius.circular(50)),
child: Icon(FontAwesomeIcons.shoppingBag,
color: Colors.white),
),
)
],
),
Container(
height: 250,
child: Image(image: AssetImage("assets/tulip.png")),
)
],
)
],
),
)
],
),
),
),
);
【问题讨论】：
请提供您如何访问第二个屏幕和第三个屏幕中的项目的代码 【参考方案1】：您似乎以错误的方式使用 Provider。在您的场景中执行此操作的最佳方法是使用 MultiProvider 将 MaterialApp 包装在您的 main.dart 文件中的 MyApp() 中。试试这样：https://pub.dev/packages/provider#multiprovider 你可以在里面放一个 ChangeNotifierProvider。
return MultiProvider(
providers: [
ChangeNotifierProvider<ViewTotalItemProvider>(
create: (context) => ViewTotalItemProvider()),
],
child: MaterialApp(...)
);
此外，您必须在模型中放置一个 getter 和 setter。这是一个例子：
class ImageModel extends ChangeNotifier
String _base64Image;
get base64Image => _base64Image;
set base64Image(String base64Image)
_base64Image = base64Image;
notifyListeners();
我还建议使用 Selector 而不是 Consumer（理想情况下，您应该使用 Selector 而不是 Consumer，以便小部件仅在其侦听的值发生变化时才重建）以下是基于上述模型的示例：
@override
Widget build(BuildContext context)
//other widgets
Selector<ImageModel, String>(
selector: (_, model) => model.base64Image,
builder: (_, image, __)
return Text(image);
,
);
)
以下是使用 RaisedButton 获取和设置它的方法：
class _PlantFeatureScreen1State extends State<PlantFeatureScreen1>
final itemModel;
List<CartPlantLists> myList=[];
@override
Widget build(BuildContext context)
itemModel = Provider.of<ViewTotalItemProvider>(context,listen:false);
print(itemModel.yourVariable); //getting the value
return Container(
child: RaisedButton(
child:Text("Set Item");
onPressed:()
itemModel.yourVariable=myList; //setting the value
,
),
);
希望这会有所帮助！祝你好运！
【讨论】：
我仍然需要重新加载我的应用才能看到更新后的值。 不知道为什么它不起作用，但我有两个替代解决方案。一种是在弹出第二个屏幕后调用 setState 的 hacky 解决方案，另一种是使用 Bloc 更新值。 @AmanChaudhary 告诉我您想要哪种解决方案。我会回答的。 顺便请看ViewTotalItemProvider类。在那里，我把清单放在了课外。我必须把它放在课堂上并加以利用吗？
是的，您需要为其放置一个吸气剂。将吸气剂放在您的班级中。尝试检查它是否有效。
让我们continue this discussion in chat.【参考方案2】：
第 1 步： 在 pubspec.yaml 文件中添加提供程序模式的依赖项
dependencies:
flutter:
sdk: flutter
provider: ^4.1.2
第 2 步： 在单独的文件中创建提供者：
class ViewTotalItemProvider with ChangeNotifier
List<CartPlantLists> _cartPlantList1 = [];
get cartPlantList1 => _cartPlantList1 ;
set cartPlantList1 (List<CartPlantLists> selected)
_cartPlantList1 = selected;
notifyListeners();
第 3 步： 使用 MultiProvider 将 MaterialApp 小部件包装在 main.dart 中。
void main() => runApp(
MultiProvider (providers: [
ChangeNotifierProvider<ViewTotalItemProvider>.value(value:
ViewTotalItemProvider()),
],
child: MyApp()
)
);
class MyApp extends StatelessWidget
Widget build(BuildContext context)
return MaterialApp(
home: HomePage(),
);
第 4 步： 在您的屏幕 PlantFeatureScreen1 中使用提供者：
class PlantFeatureScreen1 extends StatefulWidget
@override
_PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
class _PlantFeatureScreen1State extends State<PlantFeatureScreen1>
var viewTotalItemProvider;
@override
Widget build(BuildContext context)
viewTotalItemProvider = Provider.of<ViewTotalItemProvider>(context);
return Scaffold(
.......
);
第 5 步： 获取 cartPlantList1。
List<CartPlantLists> list = viewTotalItemProvider.cartPlantList1;
第 6 步：设置 cartPlantList1。
List<CartPlantLists> list = [];
...
viewTotalItemProvider.cartPlantList1 = list;
同样你可以用于其他两个类。
【讨论】：
我是 Flutter 新手，我正在尝试学习如何使用提供程序包。我做了第4步，一切看起来都很好。请协助我完成第 5 步和第 6 步。我对在哪里获取和设置它感到困惑。这样做的原因是什么？ @AmanChaudhary 看看我上面的回答。您可以在 onTap() 或 onPressed() 或任何函数中设置它。 我也做了同样的事情，但是 firstScreen 不会自动更新值。我再次必须重新加载应用程序 @AmanChaudhary 检查我的答案。它没有那么快更新它 您必须在步骤 4 中为您要使用或更新的每个屏幕声明viewTotalItemProvider = Provider.of<ViewTotalItemProvider>(context);。以上是关于从一个屏幕移动到另一个屏幕时如何不丢失列表中的数据？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 FLutter 中使用 pushNamed 将数据从一个屏幕传递到另一个屏幕？