代码之家 › 专栏 › 技术社区 › ANUP SAJJAN

在特定用例中,在不同页面上保持相同的状态

flutter-state flutter-bloc state-management flutter-provider flutter

1

ANUP SAJJAN · 技术社区 · 4 年前

我知道在状态管理方面存在一些悬而未决的问题,但似乎都没有解决我的用例。

最近,我正在构建一个基于电子商务的应用程序,遇到了对国家管理的真正需求。我有两页,

一个是产品页面,我在那里将产品添加到购物车中。
第二个是购物车页面,我在那里看到最近添加到购物车的产品。

用户可以将产品添加到购物车,然后导航到购物车。在购物车页面中,他们还可以增加或减少商品的数量。

如您所见,最初黄色商品被添加到购物车中,数量为3,但在购物车页面中,用户按下(-)按钮并将数量减少到1。现在,如果用户按下后退按钮,则黄色产品的状态在产品页面上仍为3。粉红色产品的情况类似。

因此,我试图使用正常的setState和一些全局数据结构来跟踪数量,以解决这个问题。但随着我的应用程序越来越大,很难在整个页面上保持状态。我读过不同的状态管理解决方案,如redux、BloC模式、Provider等。。。但我不清楚如何在我的用例中使用它们中的任何一个。任何有经验的人都能打破这块石头,帮助我消化吗?

任何关于如何解决这个问题的示例代码和解释都将不胜感激!

希望我的问题清楚!

0 回复 | 直到 4 年前

1

Jhakiz 4 年前

ANUP SAJJAN 为了实现这一点,您可以使用 Provider 包裹。根据您的情况查看这些代码示例:

import 'package:flutter/material.dart';

import 'models/cartmodel.dart';

class AppState with ChangeNotifier {
  List<CartModel> _cartModel = new List<CartModel>();

  // Cart data list
  List<CartModel> get getCart => _cartModel;

  // Add item to cart
  addToCart(CartModel value) {
    _cartModel.add(value);
    notifyListeners();
  }

  // Remove item to cart
  removeToCart(CartModel value) {
    _cartModel.remove(value);
    notifyListeners();
  }
}

在中创建实例 main.dart :

runApp(
  ChangeNotifierProvider<AppState>(
      create: (_) => AppState(),
      child: MyApp(),
    ),
)

您现在可以控制状态:

@override
Widget build(BuildContext context) {
  final appState = Provider.of<AppState>(context);
  ...
  // manipulation
  appState.getCart
  appState.addToCart(value)
  appState.removeToCart(value)
  ...
}

2

0

Dmitri Borohhov 4 年前

状态实际上是控制一个屏幕状态的工具,而不是数据存储。在这种情况下,您可能不应该使用State,而应该使用数据库。当用户创建购物车时,您可以在用户的设备SQLite或云中(Firebase?)创建购物车记录。起初,这可能看起来有些矫枉过正,但考虑到除了有一个可以从任何地方访问的持久存储外,你还可以获得用户行为数据,即他们添加了什么,他们是如何进行的,以及有多少用户退出了。

至于技术方面,在Flutter中,使用Provider是很常见的。对我来说,最大的好处是业务逻辑封装。如果不这样做,您的特定数据库逻辑将遍布表示层,如果您想更改某些内容,您将遇到麻烦:)

这是一个 good article 关于供应商。