颤振使用路由将数组数据从一个屏幕传递到另一个屏幕

Posted 2023-02-23

【中文标题】颤振使用路由将数组数据从一个屏幕传递到另一个屏幕

【英文标题】：flutter passing array data from one screen to another in flutter using route

【发布时间】：2022-01-12 08:07:58

【问题描述】：

请我尝试通过路由将数组数据从一个屏幕传递到另一个屏幕。 下面是我的代码。谢谢大家。

class BallGamesWidget extends StatefulWidget 
  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();


class BallGamesWidgetState extends State 
  Map<String, bool> List = 
    'Bubble Football ⚽': false,
    'Futsal ????': false,
    'Beach Volleyball ????': false,
    'Volleyball ????': false,
    'Dodgeball ????': false,
    'Rugby ????': false,
    'American Footbal ????': false,
    'Korftbal ????': false,
    'Netbal ⚾': false,
  ;

  var holder_1 = [];

  getItems() 
    List.forEach((key, value) 
      if (value == true) 
        holder_1.add(key);
      
    );

来自我的屏幕。我通过列表映射并将真实值存储到 holder_1

 AppLargeButton(
          text: "Next",
          textColor: Colors.white,
          backgroundColor: Colors.black,
          onTap: () 
            // getItems();
            Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => BallGamesSelectedItems(holder_1),
          ),
        );
          ),

然后通过按钮，我尝试使用 Navigator.push 将 holder_1 推送到我的第二个屏幕“BallGamesSelectedItems()”

首先，我不知道我对 Naviagtion.push 的使用是否正确，其次，我不知道如何在第二个屏幕中检索它。谢谢

【参考方案1】：

这对我有用

从我的第一页开始，我在 getItems() 中调用了 Navigator.push

getItems() 
    List.forEach((key, value) 
      if (value == true) 
        holder_1.add(key);
      
    );

    // Printing all selected items on Terminal screen.
    print(holder_1);

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => GamesSelectedItems(),
        settings: RouteSettings(
          arguments: holder_1,
        ),
      ),
    );
    // Clear array after use.
    // holder_1.clear();
  

然后在我的 GamesSelectedItems() 屏幕中，

@override
 Widget build(BuildContext context) 

   final List holder_1_data = ModalRoute.of(context)!.settings.arguments as List;

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[for (var item in holder_1_data) 
        Text(item)],
    ),

【参考方案2】：

在您的屏幕页面上，您声明并使用构造函数传递

class BallGamesSelectedItems 
 final List holder_1;
 BallGamesSelectedItems(this.holder_1)

如果你使用了stateful，那么可以在你的屏幕上调用它widget.holder_1

class BallGamesWidget extends StatefulWidget 
  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();


class BallGamesWidgetState extends State 
  Map<String, bool> list = 
    'Bubble Football ⚽': false,
    'Futsal ?': false,
    'Beach Volleyball ?': false,
    'Volleyball ?': false,
    'Dodgeball ?': false,
    'Rugby ?': false,
    'American Footbal ?': false,
    'Korftbal ?': false,
    'Netbal ⚾': false,
  ;


  getItems() 
    list.forEach((key, value) 
      if (value == true) 
        widget.holder_1.add(key);
      
    );

【讨论】：

谢谢伙计。我试过了，但它返回null。谢谢

可以分享BallGamesSelectedItems 代码

谢谢，我已经添加了

类 BallGamesSelectedItems 扩展 StatefulWidget 最终列表？持有人_1； BallGamesSelectedItems(this.holder_1, Key?key) : super(key: key);覆盖 _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState(); 类 _BallGamesSelectedItemsState 扩展 State 覆盖 Widget build(BuildContext context) double h = MediaQuery.of(context).size.height; return Scaffold( body: Column( Text( widget.holder_1.toString(), ),

它是否有效，否则您会遇到问题

【参考方案3】：

请参考以下代码

class BallGamesWidget extends StatefulWidget 
  

  BallGamesWidget(Key key) : super(key: key);

  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();


 // Change this
class BallGamesWidgetState extends State<BallGamesWidget>  
  Map<String, bool> List = 
    'Bubble Football ⚽': false,
    'Futsal ?': false,
    'Beach Volleyball ?': false,
    'Volleyball ?': false,
    'Dodgeball ?': false,
    'Rugby ?': false,
    'American Footbal ?': false,
    'Korftbal ?': false,
    'Netbal ⚾': false,
  ;

  var holder_1 = [];

  getItems() 
    List.forEach((key, value) 
      if (value == true) 
        
        holder_1.add(key);
      
    );
  

 

请参考以下传递参数的示例代码

class FirstScreen extends StatefulWidget 
  const FirstScreen(Key key) : super(key: key);

  @override
  _FirstScreenState createState() => _FirstScreenState();


class _FirstScreenState extends State<FirstScreen> 
  @override
  Widget build(BuildContext context) 
    return Container(
      child: Center(
        child: InkWell(
          onTap: () 
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(
                  dataList: ["Data"],
                ),
              ),
            );
          ,
          child: Text(
            "Second Screen",
          ),
        ),
      ),
    );
  


class SecondScreen extends StatefulWidget 
  final List dataList;
  const SecondScreen(Key key, this.dataList) : super(key: key);

  @override
  _SecondScreenState createState() => _SecondScreenState();


class _SecondScreenState extends State<SecondScreen> 
  @override
  Widget build(BuildContext context) 
    return Container(
      child: Center(
        child: Text(
          widget.dataList[0].toString(),
        ),
      ),
    );
  

BallGamesSelectedItem 屏幕

class BallGamesSelectedItems extends StatefulWidget 
  final List? holder_1;

  BallGamesSelectedItems(this.holder_1, Key? key) : super(key: key);

  @override
  _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState();


class _BallGamesSelectedItemsState extends State<BallGamesSelectedItems> 
  @override
  // var holder_1;

  Widget build(BuildContext context) 
 
   // final data = ModalRoute.of(context)!.settings;

    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;
    return Scaffold(
        body: Column(
      children: [
        Flexible(
          fit: FlexFit.tight,
          child: Container(
            padding: EdgeInsets.only(top: 0, bottom: 10, left: 0, right: 0),
            color: Colors.white,...

//=============== 
                  Container(
                    child: Center(
                      child: Text(
                        widget.holder_1.toString(),
                      ),
                    ),
                  ),

【参考方案4】：

正如您的问题所说，您喜欢使用路由传递数据，但您正在通过构造函数传递数据。您可以查看更多关于navigate-with-arguments的详细信息。

使用 ModalRoute 传递数据

  Navigator.of(context).push(
                  MaterialPageRoute(
                      builder: (context) => BallGamesSelectedItems(),
                      settings: RouteSettings(
                        arguments: holder_1,
                      )),
                );

在build方法内接收数据

 final data = ModalRoute.of(context)!.settings;

我强烈推荐checking this answer about passing data 和navigate-with-arguments。

【讨论】：

感谢 Yeasin。在我的第二个屏幕上。我收到错误“无法在初始化程序中访问实例成员 'context'。”当我写 'final data = ModalRoute.of(context)!.settings; '

你在build方法里面声明了吗，可以参考上面的答案链接

【参考方案5】：

参考：https://docs.flutter.dev/cookbook/navigation/passing-data

第一个屏幕，

Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => BallGamesSelectedItems(holder_1:holder_1),
          ),
        );

第二个屏幕，

class BallGamesSelectedItems extends StatefulWidget 
  final var holder_1;

  BallGamesSelectedItems(Key key, this.holder_1);
  @override
  _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState(holder_1);


class _BallGamesSelectedItemsState extends State<BallGamesSelectedItems>
    
    
    var holder_1;