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

Question

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

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 的使用是否正确，其次，我不知道如何在第二个屏幕中检索它。谢谢

Answer 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)],
    ),

Answer 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);
      }
    });

Answer 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(),
                      ),
                    ),
                  ),

Answer 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。

Answer 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;
    }