如何在 flutter 中使用导航器将数据发送到文件中的两个不同 class

Question

我迷失了方向。有人可以帮助我如何使用 Navigator 将数据从第一页发送到第二页吗？目标文件中存在两种类型的 class，即有状态小部件和无状态小部件。我正在尝试使用导航器从第一页发送数据：

Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW(category :categoriesList[index].name)));

restaurantLISTVIEW 是第二页上的有状态 class。如何在同一个文件中与无状态 class 共享数据？

第一页我的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:phpfood/restaurantlist.dart';
//import 'globals.dart' as globals;
import 'custom_textW.dart';


class Category {
  final String name;
  final String image;

  Category({@required this.name, @required this.image});
}
List<Category> categoriesList = [
  Category(name: "Breakfast", image: "nasilemak.png"),
  //Category(name: "Kuih", image: "kuih.png"),
  Category(name: "Lunch", image: "lunch.png"),
  //Category(name: "Minum Petang", image: "mnmptg.png"),
  Category(name: "Dinner", image: "mknmlm.png"),
  //Category(name: "Minum Malam", image: "mnmmlm.png"),
  //Category(name: "Minuman", image: "air.png"),
];

class Categories extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categoriesList.length,
        itemBuilder: (_, index) {
          return Padding(
            padding: const EdgeInsets.only(left: 28.0, top: 8),
            child: Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(color: Colors.white, boxShadow: [
                    BoxShadow(
                        color: Colors.red[200], offset: Offset(4, 6), blurRadius: 20)
                  ]),
                  //tambah di sini kalau nk gesture
                  child: InkWell(
                    //onTap: ()=> Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new SarapanPagi(),)),
                    onTap: (){
                      Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW(category :categoriesList[index].name)));
                    },
                    /*{
                      if(categoriesList[index].name == "Breakfast"){
                        Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW(category: 'breakfast')));
                        //Navigator.of(context).push(MaterialPageRoute<void>(builder: (context) => restaurantLISTVIEW(category: 'breakfast',),),);
                        }
                      else if(categoriesList[index].name == "Lunch"){
                        Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW()));
                      }
                      else if(categoriesList[index].name == "Dinner"){
                        Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW()));
                      }
                    },*/
                    child: Image.asset(
                          "images/${categoriesList[index].image}",
                          width: 100,
                        ),
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                CustomText(
                  text: categoriesList[index].name,
                  size: 17,
                  colors: Colors.black,
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

第二页我的完整代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:http/http.dart' as http;
import 'breakfast.dart';

// ignore: camel_case_types
class restaurantLISTVIEW extends StatefulWidget {

  restaurantLISTVIEW({this.category});
  final String category;

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

// ignore: camel_case_types
class _restaurantLISTVIEWState extends State<restaurantLISTVIEW> {


  Future<List> getData() async{

    var url = 'http://10.0.2.2/foodsystem/restaurantlist.php';
    var data = {'product_type': 'xde pape ppon saje nk hantar value'};
    var response = await http.post(url, body: json.encode(data));
    //final response= await http.get("http://10.0.2.2/foodsystem/getdata.php");
    return json.decode(response.body);}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            //Text("Restaurant's Owner Page"),
            Text('${widget.category}', textAlign: TextAlign.center, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w700), ),
          ],
        ),
        centerTitle: false,
        //automaticallyImplyLeading: false,
      ),
      body:
      Padding(
        padding: const EdgeInsets.only(bottom: 20, left: 5, right: 5),
        child: Column(
          children: [
            SizedBox(height: 30,),
            Container(
              //decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 4), borderRadius: BorderRadius.circular(15)),
              height: 600,
              child: FutureBuilder<List>(
                future: getData(),
                builder: (context, snapshot){
                  if(snapshot.hasError) print(snapshot.error);

                  return snapshot.hasData ?
                  ItemList(list: snapshot.data,) :
                  Center(child: CircularProgressIndicator(),);
                },
              ),
            ),
            FloatingActionButton(
              onPressed: (){
                return showDialog(
                  context: context,
                  builder: (context){
                    return AlertDialog(
                      content: Text(
                          '${widget.category}'
                      ),
                    );
                  },
                );
              },
            ),
            SizedBox(height: 10,),
          ],
        ),
      ),
    );
  }
}
class ItemList extends StatelessWidget {

  final List list;
  final String category;
  ItemList({this.list, this.category});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        //color: Colors.red.shade100,
        height: 600,
        child: ListView.builder(
          itemCount: list==null ? 0 : list.length,
          itemBuilder: (context, i){
            return new Container(
              height: 200,
              child: new GestureDetector(
                onTap: ()
                {Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new SarapanPagi(list: list, index: i, category: category,)));},
                /*{
                  if(category == "Breakfast"){
                    Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new SarapanPagi(list: list, index: i, category: category,)));
                  }
                },*/
                child: new Card(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      FloatingActionButton(
                        onPressed: (){
                          return showDialog(
                            context: context,
                            builder: (context){
                              return AlertDialog(
                                content: Text(
                                    '$category hellp'
                                ),
                              );
                            },
                          );
                        },
                      ),
                      Row(
                        children: [
                          Container(
                            constraints: BoxConstraints(minWidth: 180, maxWidth: 180),
                            child:
                            Column(
                              children: [
                                Text(list[i]["restaurant_name"], style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold), textAlign: TextAlign.center,),
                                Text("Restaurant ID: ${list[i]["restaurant_id"]}", style: TextStyle(fontSize: 20,), textAlign: TextAlign.center,),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left :20.0),
                            child: Container(
                              constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
                              child:
                              SizedBox(
                                width: 50,
                                child: Column(
                                  children: [
                                    Text("SSM: ${list[i]["restaurant_ssm"]}", textAlign: TextAlign.center, style: TextStyle(fontSize: 15),),
                                    Text("Phone: ${list[i]["restaurant_phone"]}", textAlign: TextAlign.center, style: TextStyle(fontSize: 15),),
                                    Text("Address: ${list[i]["restaurant_address"]}", textAlign: TextAlign.center, style: TextStyle(fontSize: 15),),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [

                        ],
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

正如您在无状态 class 中看到的那样，我已经从第一页调用了值，但它 returns 为空，因为没有任何内容转发到 class。

Answer 1

问题是您没有通过 category 参数共享 ItemList class 的名称数据：

进行以下更正：

builder: (context, snapshot){
          if(snapshot.hasError) print(snapshot.error);

          return snapshot.hasData ?
          ItemList(list: snapshot.data, category: widget.category) :
          Center(child: CircularProgressIndicator(),);
        },

一个技巧是在小部件构造函数中使用 @required 符号，以免忘记填写命名参数。示例：

class ItemList extends StatelessWidget {

  final List list;
  final String category;
  ItemList({@required this.list, @required this.category});

 @override
  Widget build(BuildContext context) {
    return Container();
  }
}

如何在 flutter 中使用导航器将数据发送到文件中的两个不同 class

How to sent data into two different class within a file using navigator in flutter

navigation

flutter