Flutter中页面之间动态添加数据

Question

第一页

所以我想将这个 ListTile 发送到另一个页面，我们将其称为“购物车”页面以进行演示。它位于第一页的单独函数中，位于构建器上方，稍后在构建器中作为函数调用。这是它的代码：

return ListTile(
                  trailing: Container(
                    padding: EdgeInsets.only(top: 15.0),
                    child: IconButton(
                        icon: Icon(Icons.add),
                       
                        onPressed: () => MaterialPageRoute(
                              this i am not sure how to access cart page
                              builder: (context) =>
                                  Cart(food.name, food.price),
                            )),
                  ),

注意 onPressed 上没有 Navigator.push()，因为我只想将数据发送到购物车页面。

这是将数据发送到另一个页面上的“购物车”屏幕的功能，它可以工作。我遇到的问题是我还希望在 AppBar 上（在构建器下方）上有一个按钮，该按钮只进入该页面而不传递任何数据（上面的图标应该只传递数据 onPressed，它是第一页上的 ListTile 项.)

这是第一页 AppBar 图标的代码：

return Scaffold( 
appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.add_shopping_cart, color: Colors.white),
           
            onPressed: () => print('This needs to lead to cart page.'),
            //I tried doing the Navigator.push route, but it asks for arguments, but I just want
            //to go to the page and not pass any arguments from here
            //this needs to lead to cart page
          ),
        ],)

购物车页面

这是应该推送数据的“购物车”页面，理想情况下，我只想将该 ListTile 项目添加到购物车中，作为与第 1 页相同的列表图块。

 class Cart extends StatefulWidget {
  
  
  final String foodName;
  final String foodPrice;
  Cart(this.foodName, this.foodPrice);

  @override
  _CartState createState() => _CartState();
}

class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
        centerTitle: true,
      ),
      body: Center(
          child: Container(
              child: Text('${widget.foodName}, ${widget.foodPrice}'))),
    );
  }
}

问题是我想对食物有不同的选择，有时会添加例如“food.description”或类似的东西，甚至是像“drink.name”这样的不同类。这是我关于这个问题的精彩画图演示。

Answer 1

您应该为此使用状态管理包。 Provider、Bloc、Redux 等。当用户按下 Add 按钮时。您可以将数据添加到主源并使用这些包通知侦听器。这里有一个 Provider 包的例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CartItemsModel extends ChangeNotifier {
  List<String> _cartItems = [];

  List<String> get cartItems => _cartItems;

  addCartItem(String item) {
    _cartItems.add(item);
    notifyListeners();
  }
}

class MainPage extends StatelessWidget {
  const MainPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Provider(
      create: (c) => CartItemsModel(),
      child: MaterialApp(
        home: Consumer<CartItemsModel>(
          builder: (c, model, _) => Scaffold(
            appBar: AppBar(
              actions: [
                IconButton(
                  icon: Column(
                    children: [
                      Icon(Icons.add_shopping_cart_rounded),
                      Text('added items' + model.cartItems.length.toString()),
                    ],
                  ),
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (c) => SecondPage(),
                    ));
                  },
                ),
              ],
            ),
            body: Column(
              children: [
                Text('CartItems Length:' + model.cartItems.length.toString()),
                RaisedButton(
                  onPressed: () {
                    model.addCartItem('Example Cart Item');
                  },
                  child: Text('ADD ITEM'),
                ),
                RaisedButton(
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (c) => SecondPage(),
                    ));
                  },
                  child: Text('Go another page'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<CartItemsModel>(
      builder: (c, model, _) => Scaffold(
        body: Column(
          children: model.cartItems
              .map((e) => ListTile(
                    title: Text(e),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

在您的 main 函数中运行此应用，看看它是如何工作的。当您按下添加项目按钮时，它会将“示例购物车项目”添加到提供者类的列表中，并且提供者类将通知其他侦听器更新其状态。 欲了解更多信息： https://pub.dev/packages/provider