flutter - 如何在 Flutter 中将项目存储在一页中

问题描述

设想

共有三页，第一页是加载图像和名称的主页，第二页是数量页一旦我在第一页（主页）中选择任何图像，它就会移动到显示详细信息的第二页（数量页）图像，价格和数量的第三页是购物车页面，一旦我单击第二页（数量页面）中的按钮，它将项目存储在列表视图构建器中。

问题

现在的问题是，一旦我单击第二页中的按钮，我就可以将变量（名称、价格等）传递到第三页，但是如何将项目存储在第三页中，因为如果我想在第一页中选择另一个项目页面（主页），那么之前选择的项目必须出现在第三页（购物车页面）中。下面是这三个页面的 dart 代码。

主页.dart

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();}
class _HomeState extends State<Home> {
  var productList = [{
      "name": "Cake",
      "image": "assets/1.png",
      "price": "20.00",},
{
      "name": "Pasteries",
      "image": "assets/2.png",
      "price": "30.00",},];
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
        body: ListView.builder(
            itemCount: productList.length,
            itemBuilder: (BuildContext context, int index) {
              return Products(
                product_image: productList[index]['image'],
                product_name: productList[index]['name'],
                product_price: productList[index]['price'],
              );}));}}
class Products extends StatelessWidget {
  final product_name;
  final product_image;
  final product_price;
  Products({this.product_name, this.product_image, this.product_price});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 35.0, bottom: 15.0, left: 20.0, right: 20.0),
      child: GestureDetector(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => Quantities(
            productname: product_name,
            productprice: product_price,
            productimage: product_image,)));},
        child: Container(
          child: new FittedBox(
            child: Material(
                color: Colors.white,
                elevation: 15.0,
                borderRadius: BorderRadius.circular(15.0),
                shadowColor: Color(0x802196F3),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 250,
                      height: 200,
                      child: ClipRRect(
                        borderRadius: new BorderRadius.circular(15.0),
                        child: new Image.asset(
                          product_image,
                          fit: BoxFit.cover,),),),
                    Padding(
                      padding: const EdgeInsets.only(top: 5.0,bottom: 5.0),
                      child: Text(product_name,style: TextStyle(color: Colors.blueGrey[700],
                          fontWeight: FontWeight.bold,fontSize: 18.0),),),],)),),),),);}}

数量.dart

class Quantities extends StatefulWidget {
  var productprice;
  final productimage;
  final productname;
  Quantities({this.productprice, this.productimage,this.productname});
  @override
  _QuantitiesState createState() => _QuantitiesState(productprice,productimage,productname);}
class _QuantitiesState extends State<Quantities> {
  int counter = 1;
  var productprice;
  var finalprice;
  final productimage;
  final productname;
  _QuantitiesState(this.productprice, this.productimage,this.productname);
  void increment() {
    setState(() {
      counter++;
    finalprice=double.parse(productprice)*counter;});}
  void decrement() {
    setState(() {
      counter--;
      finalprice=double.parse(productprice)*counter;});}
  @override
  void initState() {
    super.initState();
    finalprice=double.parse(productprice);}
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        backgroundColor: Colors.lightBlue[900],
        title: Text('Quantities'),),
      body: Padding(
        padding: const EdgeInsets.only(top: 10.0),
        child: ListView(
          children: <Widget>[
            new Container(
              height: 200.0,
              child: GridTile(
                child: Container(
                  color: Colors.white,
                  child: Image.asset(productimage),),),),
            Center(
              child: Text(
                "Price: "+finalprice.toString()+" SAR",
                style:
                TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),),
            Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 10.0),
                    child: PlatformButton(
                        onPressed: () {
                          decrement();
                          if (counter < 1) {
                            counter = 1;
                            finalprice=productprice;}},
                        child: Text(
                          '-',style: TextStyle(color: Colors.white, fontSize: 30.0),),
                        androidFlat: (_) =>
                            MaterialFlatButtonData(color: Colors.cyan),
                        ios: (_) => CupertinoButtonData(
                            color: Colors.cyan)),
                  ),Text(
                    '$counter',style:TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),),
                  Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: PlatformButton(
                        onPressed: () {increment();},
                        child: Text(
                          '+',style: TextStyle(color: Colors.white, fontSize: 30.0),),
                        androidFlat: (_) =>
                            MaterialFlatButtonData(color: Colors.cyan),
                        ios: (_) => CupertinoButtonData(
                            color: Colors.cyan)),),],),),
            Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Center(
                child: PlatformButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(builder: (context) => Cart(
                        pImage: productimage,
                        pPrice: finalprice.toString(),)));},
                    child: Text('Add to Cart',style: TextStyle(color: Colors.white),),
                    androidFlat: (_) => MaterialFlatButtonData(
                        color: Colors.cyan),
                    ios: (_) => CupertinoButtonData(
                        color: Colors.cyan
                    )),),),],),),);}}

购物车.dart

class Cart extends StatefulWidget {
  final pImage;
  var pPrice;
  Cart({this.pImage, this.pPrice});
  @override
  _CartState createState() => _CartState(pImage,pPrice);}
class _CartState extends State<Cart> {
  final pImage;
  var pPrice;
  _CartState(this.pImage, this.pPrice);
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        backgroundColor: Colors.lightBlue[900],
        automaticallyImplyLeading: false,
        title: Text('Cart'),),
      body: ListView(
        children: <Widget>[
          Card(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text(pPrice),],),
                    Container(
                      height: 100.0,
                      width: 50.0,
                      child: Image.asset(pImage),),],)],),),],),);}}

标签： flutterdart

flutter - 如何在 Flutter 中将项目存储在一页中

问题描述

解决方案

推荐阅读