flutter - 有没有一种方法可以使用pushNamed将多个索引参数传递给另一个屏幕？

Question

我正在尝试使用ListViewBuilder和Cards导航到新屏幕。目前，我已设置了命名路由，以便它接受已解析的json模型的索引。因此，问题是如何传递“名称”(String)参数以及“nextEpisodes”(ListString)和“prevEpisodes”(ListString)。我想在下一个屏幕上访问所有这些变量。

提前致谢。

ListView.builder(
                  shrinkWrap: true,
                  itemCount: slist.length,
                  itemBuilder: (context, index) {
                    print(slist[index].prevEpisodes);
                    return Card(
                      child: ListTile(
                          onTap: () {
                            Navigator.of(context).pushNamed('/episodes', arguments: slist[index].name);
                          },
                          title: Text(slist[index].name),
                          //                        subtitle: Text(shows[index].showNextAirDate),
                          //                        leading: CircleAvatar(
                          //                          backgroundImage:
                          //                              AssetImage('assets/${shows[index].showPic}'),
                          //                        ),
                          trailing: Icon(Icons.keyboard_arrow_right,
                              color: Colors.black26, size: 30.0)),
                    );
                  }),

Answer 1

您可以像这样将List的特定索引中的整个列表项从一个屏幕发送到另一个屏幕

Inside the class A

 List<YOUR_BEAN> list = new List<YOU_BEAN>();


    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => B(bean: list [index])), //// HERE B IS THE CLASS ON WHICH YOU NEED TO CARRY DATA FROM CLASS A
    );

在 B类中，您需要添加构造函数以从 A类中捕获值，如下所示

class B extends StatefulWidget {
      YOUR_BEAN bean;

      B ({Key key, @required this.bean}) : super(key: key); ////YOU WILL GET THE DATA HERE FROM THE CONSTRUCTOR , AND USE IT INSIDE THE CLASS LIKE "widget.bean" 

      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _B();
      }
    }

并请检查它的示例以将数据从一个类传递到另一个类

A class which send data to B class

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'B.dart';
import 'Fields.dart';

    class A extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _A();
      }
    }

    class _A extends State<A> {

      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Screen A',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.red,
              accentColor: Color(0xFFFEF9EB),
            ),
            home: Scaffold(
                appBar: new AppBar(),
                body: Container(
                  margin: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(10.0),
                        child: Text("Screen A"),
                      ),
                      Expanded(
                        child: ListView.builder(
                            itemCount: fields.length,
                            itemBuilder: (BuildContext ctxt, int index) {
                              return ListTile(
                                title: new Text("Rating #${fields[index].rating}"),
                                subtitle: new Text(fields[index].title),
                                onTap: (){

                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => B(bean: fields [index])), //// HERE B IS THE CLASS ON WHICH YOU NEED TO CARRY DATA FROM CLASS A
                                  );
                                },
                              );
                            }),
                      )
                    ],
                  ),
                )));
      }
    }

    List<Fields> fields = [
      new Fields(
        'One',
        1,
      ),
      new Fields(
        'Two',
        2,
      ),
      new Fields(
        'Three',
        3,
      ),
      new Fields(
        'Four',
        4,
      ),
      new Fields(
        'Five',
        5,
      ),
    ];

Now check B class which receive the data from A class

import 'package:flutter/material.dart';

import 'Fields.dart';


    class B extends StatefulWidget{

      Fields bean;

      B ({Key key, @required this.bean}) : super(key: key); ////YOU WILL GET THE DATA HERE FROM THE CONSTRUCTOR , AND USE IT INSIDE THE CLASS LIKE "widget.bean"

      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
         return _B ();

      }

    }

    class _B extends State<B> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            title: 'Screen A',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.red,
              accentColor: Color(0xFFFEF9EB),
            ),
            home: Scaffold(
                appBar: new AppBar(),
                body: Container(
                  margin: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(10.0),
                        child: Center(
                          child: Text("Screen B" ,style: TextStyle(fontSize: 20.0),),
                        )
                      ),
                       Text("Rating=>>>  ${widget.bean.rating}  and Title ${widget.bean.title} ")
                    ],
                  ),
                )));
      }
    }

我使用了Pojo类作为列表，请检查一次

Fields.dart

class Fields {
  final String title;
  final int rating;

  Fields(this.title, this.rating);
}

And the output of the above program as follow.