当在网格中轻拍网格时如何导航到新页面？

Question

这是来自正在开发的应用程序的代码的一部分，我已经为列表中存在的每个项目创建了dart文件，但我不知道如何在列表中提供onpress功能，以便它将我导航到下一个页面

这里是代码

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

  final Items item2 = new Items(
    title: "Message",
    img: "assets/message.png",
  );
  final Items item3 = new Items(
    title: "Music",
    img: "assets/music.png",
  );
  final Items item4 = new Items(
    title: "Navigation",
    img: "assets/navigation.png",
  );
  final Items item5 = new Items(
    title: "News",
    img: "assets/news.png",
  );
  final Items item6 = new Items(
    title: "To Do List",
    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 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()),
    );
  }
}

我想在用户点击每个项目时导航到新页面。如何导航？

Answer 1

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

  final Items item2 = new Items(
    title: "Message",
    img: "assets/message.png",
  );
  final Items item3 = new Items(
    title: "Music",
    img: "assets/music.png",
  );
  final Items item4 = new Items(
    title: "Navigation",
    img: "assets/navigation.png",
  );
  final Items item5 = new Items(
    title: "News",
    img: "assets/news.png",
  );
  final Items item6 = new Items(
    title: "To Do List",
    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 GestureDetector(
              onTap: (){
                Navigator.push(context,MaterialPageRoute(builder: (context)=> *your_new_route_page*))
              },
              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()),
    );
  }
}

Answer 2

这里是您修改后的构建方法