我想为每个按下的网格项目导航到另一个页面。我怎样才能做到这一点？我试图研究实现此目的的最佳方法，但没有成功。预先谢谢你。
我为每个项目（screen_one.dart，screen_two.dart等）都有dart文件。我不知道如何对每个项目应用导航。
这是我的网格文件
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class GridDashboard extends StatelessWidget {
Items item1 = new Items(
title: "Calendar",
subtitle: "March, Wednesday",
event: "3 Events",
img: "assets/calendar.png");
Items item2 = new Items(
title: "Groceries",
subtitle: "Bocali, Apple",
event: "4 Items",
img: "assets/food.png",
);
Items item3 = new Items(
title: "Locations",
subtitle: "Lucy Mao going to Office",
event: "",
img: "assets/map.png",
);
Items item4 = new Items(
title: "Activity",
subtitle: "Rose favirited your Post",
event: "",
img: "assets/festival.png",
);
Items item5 = new Items(
title: "Forms",
subtitle: "",
event: "",
img: "assets/todo.png",
);
Items item6 = new Items(
title: "Settings",
subtitle: "",
event: "",
img: "assets/setting.png",
);
@override
Widget build(BuildContext context) {
List<Items> myList = [item1, item2, item3, item4, item5, item6];
var color = 0xff453658;
return Flexible(
child: GridView.count(
childAspectRatio: 1.0,
padding: EdgeInsets.only(left: 16, right: 16),
crossAxisCount: 2,
crossAxisSpacing: 18,
mainAxisSpacing: 18,
children: myList.map((data) {
return Container(
decoration: BoxDecoration(
color: Color(color), borderRadius: BorderRadius.circular(10)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
data.img,
width: 42,
),
SizedBox(
height: 14,
),
Text(
data.title,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600)),
),
SizedBox(
height: 8,
),
Text(
data.subtitle,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white38,
fontSize: 10,
fontWeight: FontWeight.w600)),
),
SizedBox(
height: 14,
),
Text(
data.event,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white70,
fontSize: 11,
fontWeight: FontWeight.w600)),
),
],
),
);
}).toList()),
);
}
}
class Items {
String title;
String subtitle;
String event;
String img;
Items({this.title, this.subtitle, this.event, this.img});
}
答案 0 :(得分：1)
在您的Items类中，创建另一个名为screen的变量，其类型为Widget。我假设您使用GridView.builder并将每个项目构造为按钮或类似的东西。如果是这种情况，请在您的onPressed / onTap函数中使用代码
Navigator.push(context, new MaterialPageRoute<Widget>(
builder: (BuildContext context) {
return myList[index].screen;
}
)
);
或者将您的屏幕变量设为Widget，而不是将String类型的屏幕变量设为MaterialApp，并在您的routes: <String, WidgetBuilder> {
'/screen1': (BuildContext context) => new Screen1(),
'/screen2' : (BuildContext context) => new Screen2(),
'/screen3' : (BuildContext context) => new Screen3(),
'/screen4' : (BuildContext context) => new Screen4()
},
内声明
List<Item> items = [
new Item(
title: "Calendar",
subtitle: "March, Wednesday",
event: "3 Events",
screen: CalendarScreen,
img: "assets/calendar.png"),
new Item(
title: "Groceries",
subtitle: "Bocali, Apple",
event: "4 Items",
screen: GroceriesScreen,
img: "assets/food.png",
),
new Item(
title: "Locations",
subtitle: "Lucy Mao going to Office",
event: "",
screen: LocationScreen,
img: "assets/map.png",
),
new Item(
title: "Activity",
subtitle: "Rose favirited your Post",
event: "",
screen: ActivityScreen,
img: "assets/festival.png",
),
new Item(
title: "Forms",
subtitle: "",
event: "",
screen: FormsScreen,
img: "assets/todo.png",
),
new Item(
title: "Settings",
subtitle: "",
event: "",
screen: SettingsScreen,
img: "assets/setting.png",
)
];
var color = 0xff453658;
@override
Widget build(BuildContext context) {
return Flexible(
child: GridView.count(
childAspectRatio: 1.0,
padding: EdgeInsets.only(left: 16, right: 16),
crossAxisCount: 2,
crossAxisSpacing: 18,
mainAxisSpacing: 18,
children: items.map((data) {
return GestureDetector(
onTap: () {
Navigator.push(context, new MaterialPageRoute<Widget>(
builder: (BuildContext context) {
return data.screen;
}));
},
child: Container(
decoration: BoxDecoration(
color: Color(color),
borderRadius: BorderRadius.circular(10)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
data.img,
width: 42,
),
SizedBox(
height: 14,
),
Text(
data.title,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600)),
),
SizedBox(
height: 8,
),
Text(
data.subtitle,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white38,
fontSize: 10,
fontWeight: FontWeight.w600)),
),
SizedBox(
height: 14,
),
Text(
data.event,
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.white70,
fontSize: 11,
fontWeight: FontWeight.w600)),
),
],
),
),
);
}).toList()),
);
并且项目中的每个字符串都将与其中之一相对应。
这是您的代码外观的示例。
pandas答案 1 :(得分：0)