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

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将支架_1推到我的第二个scrren"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

参考：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;
}

Answer 3

正如您的问题所说，您喜欢使用路由传递数据，但您通过构造函数传递数据。您可以查看有关使用参数导航的详细信息。

使用ModalRoute传递数据

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

在类似的build方法内接收数据

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

我强烈建议您检查这个关于传递数据和使用参数导航的答案。

Answer 4

请参阅以下代码

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 5

在屏幕页面上，您声明并通过构造函数

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