当用户在Flutter中点击每个项目（网格）时，如何导航到不同的页面？

Question

这是代码，使用此导航器代码时，我无法导航到其他页面。用户点击时，只有一个项目能够导航到另一页面。如果使用命名路线导航，它会改变吗？当用户分别点击每个项目时，是否仍可以导航到各个页面。当我尝试在ontap方法中再次提供相同的导航代码时，它不起作用！有什么办法可以纠正这个问题？

class GridDashboard extends StatelessWidget {
  final Items item1 = new Items(
      title: "Call",
      subtitle: "Contacts",
      event: "",
      img: "assets/call.png");

  final Items item2 = new Items(
    title: "Message",
    subtitle: "inbox",
    event: "",
    img: "assets/message.png",
  );
  final Items item3 = new Items(
    title: "Music",
    subtitle: "Listen to fav songs",
    event: "",
    img: "assets/music.png",
  );
  final Items item4 = new Items(
    title: "Navigation",
    subtitle: "select destination",
    event: "",
    img: "assets/navigation.png",
  );
  final Items item5 = new Items(
    title: "News",
    subtitle: "Today's highlights",
    event: "",
    img: "assets/news.png",
  );
  final Items item6 = new Items(
    title: "To Do List",
    subtitle: "",
    event: " ",
    img: "assets/todolist.png",
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff616161;
    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 GridTile(
              child: InkResponse(
                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)),
                      ),
                    ],
                  ),
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (item1) => CallApp()),


                  );
                },
              ),
            );
          }).toList()),
    );
  }
}
'''

how to navigate separately to new pages separately when user taps on each item.?
 i tried normal navigation method but I'm not able to access other than one item with this code.
Is there anyway to navigate to various pages when user taps on each item separately.

Answer 1

您可以同时使用命名导航或普通（PageRoute）导航。实际问题出在您的代码结构中。在这里，我建议您添加一个小部件变量，该变量告诉用户用户应在Items模型中导航的位置。例如，

class Items{
  final String title;
  final String subtitle;
  final String event;
  final String img;
  final Widget navigateTo;

  Items({this.title, this.subtitle, this.event, this.img, this.navigateTo});
}

现在，您的模型接受navigateTo作为小部件。我们可以使用此参数来决定在哪里导航。因此，您的最终代码变为，

class GridDashboard extends StatelessWidget {
  final Items item1 = new Items(
      title: "Call",
      subtitle: "Contacts",
      event: "",
      img: "assets/call.png",
      navigateTo: Call()
      );

  final Items item2 = new Items(
    title: "Message",
    subtitle: "inbox",
    event: "",
    img: "assets/message.png",
    navigateTo: Message()
  );
  final Items item3 = new Items(
    title: "Music",
    subtitle: "Listen to fav songs",
    event: "",
    img: "assets/music.png",
    navigateTo: Music()
  );
  final Items item4 = new Items(
    title: "Navigation",
    subtitle: "select destination",
    event: "",
    img: "assets/navigation.png",
    navigateTo: Navigation()
  );
  final Items item5 = new Items(
    title: "News",
    subtitle: "Today's highlights",
    event: "",
    img: "assets/news.png",
    navigateTo: News()
  );
  final Items item6 = new Items(
    title: "To Do List",
    subtitle: "",
    event: " ",
    img: "assets/todolist.png",
    navigateTo: Todo()
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff616161;
    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 GridTile(
              child: InkResponse(
                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)),
                      ),
                    ],
                  ),
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => data.navigateTo));
                  }

                  );
                },
              ),
            );
          }).toList()),
    );
  }
}