如何将所选数据传递到flutter中的下一页

Question

我想把选定的数据从当前页面传递到下一页。我是个初学者，我已经在网上尝试了所有的解决方案，但似乎没有一个有效。我有一组数据，我想将卡中选定的数据详细信息传递到下一页。

   import 'package:flutter/material.dart';
import 'package:flutter_new/components/phone_productDetail.dart';

import 'package:flutter_new/model/products.dart';
import 'package:flutter_new/model/products_repository.dart';

class AllPhones extends StatefulWidget {
  AllPhones({
    Key key,
  }) : super(key: key);
  @override
  _AllPhonesState createState() => _AllPhonesState();
}

class _AllPhonesState extends State<AllPhones> {
  List<Card> _buildGridCards(BuildContext context) {
    List<Product> products = ProductsRepository.loadProducts(Category.phones);

    if (products == null || products.isEmpty) {
      return const <Card>[];
    }
    return products.map((product) {
      return Card(
        semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: Column(
          children: <Widget>[
            Image.network(
              product.image,
              fit: BoxFit.cover,
              height: 190,
            ),
            Container(
              height: 110,
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        child: Text(
                          product.name,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.brown,
                          ),
                        ),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
                            child: Container(
                              child: Text(
                                '\$${product.price}',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.brown[300],
                                    fontSize: 20),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
                            child: Container(
                                child: Text(
                              '\$${product.priceOld}',
                              style: TextStyle(
                                  color: Colors.brown,
                                  decoration: TextDecoration.lineThrough),
                            )),
                          )
                        ],
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                          child: Container(
                            child: Text(
                              "2554 Sales",
                              style: TextStyle(
                                color: Colors.brown,
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
                          child: Container(
                              child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.star,
                                color: Colors.blue,
                                size: 15,
                              ),
                              Text(
                                '3',
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.brown,
                                ),
                              )
                            ],
                          )),
                        )
                      ],
                    )
                  ]),
            )
          ],
        ),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phones and Tablets'),
      ),
      body: InkWell(
        onTap: () {
          Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => PhoneProductDetail(

              )));
        },
        child: GridView.count(
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            crossAxisCount: 2,
            padding: EdgeInsets.all(16.0),
            childAspectRatio: 50 / 100,
            children: _buildGridCards(context)),
      ),
    );
  }
}

我想将数据传递给我的PhoneProductDetailPage。

下面是我的模型和存储库

import 'package:flutter/foundation.dart';

    enum Category {
      all,
      phones,
      tablets,
      home,
      kitchen,
      sports,
      electronics,
      fashion,
      computers,
      beauty,
      baby
    }

    class Product {
      const Product({
        @required this.category,
        @required this.id,
        @required this.name,
        @required this.price,
        @required this.priceOld,
        @required this.image,
           @required this.image2,
              @required this.image3,
                 @required this.prodDetail,
      })  : assert(category != null),
            assert(id != null),
            assert(name != null),
            assert(image != null),
            assert(price != null);

      final Category category;
      final int id;
      final String image;
      final String name;
      final int price;
        final int priceOld;
        final String image2;
        final String image3;
        final String prodDetail;

      @override
      String toString() => "$name (id=$id)";
    }

我

import 'products.dart';

class ProductsRepository {
  static List<Product> loadProducts(Category category){
     const allProducts = <Product>[
    Product(
      id:1,
      category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:2,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:3,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:4,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:5,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:6,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:7,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:8,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:9,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
      Product(
        id:10,
        category: Category.phones,
        name: "Italian suit with a fitted trouser",
        image:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image2:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        image3:
            'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
        price: 120,
        priceOld: 85,
        prodDetail:
            "Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
     ];
      if (category == Category.all) {
      return allProducts;
    } else {
      return allProducts.where((Product p) {
        return p.category == category;
      }).toList();
  }
}
}

提前感谢

Answer 1

您可以将数据作为参数传递。为此，您可能希望在PhoneProductDetailPage类的构造函数中声明它。

让我们试着在下面给你的类传递一个字符串，这样你就能清楚地得到它。我将一个命名参数text = 'data'传递给这个类。

onTap: () {
          Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => PhoneProductDetail(text = 'data'),
));
            },

您的PhoneProductDetailPage类的定义将把构造函数实现为

class PhoneProductDetail extends StatelessWidget {
      final String text;
      PhoneProductDetail({Key key, @required this.text}) : super(key: key);

Answer 2

您可以简单地将其作为构造函数参数进行传递，如下所示

    Navigator.push(context, MaterialPageRoute(builder: (context) => PhoneProductDetail(youCanPassAnyObjecHere)));

或者，您可以这样使用导航器参数

Navigator.pushNamed(
  context,
  'routeName',
  arguments: {
    argumentKey1: data1,
    argumentKey2: data2,
  },
);

然后，要使用它，您必须在build方法中从路径中提取数据

final Map arguments = ModalRoute.of(context).settings.arguments;
if (arguments != null) {
  data1 = arguments[argumentKey1];
  data2 = arguments[argumentKey2];
}

要使用第二个选项，您必须使用name route。