Flutter：在 gridview 上添加单独的链接

Question

我已经创建了一个网格视图，但我现在的问题是如何将这个网格单独链接到不同的页面。下面是我的代码片段。

非常感谢。

final List<String> _listItem = [
'assets/images/SDG Wheel_Transparent_WEB.png',
'assets/images/unicef.png',
'assets/images/share.png',
'assets/images/teamTrees.png',
'assets/images/TeamSeas.jpeg',
'assets/images/global giving.png',
'assets/images/svc.png',
'assets/images/food2.png',

];

@override
Widget build(BuildContext context) {
return Container(
  padding: const EdgeInsets.all(20.0),
  child: Column(
    children: <Widget>[
      Container(
        width: double.infinity,
        height: SizeConfig.screenHeight / 2.5,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/images/food2.png'),
                fit: BoxFit.cover)),
      ),
      const Align(
        alignment: Alignment.centerLeft,
        child: Text(
          "Donation Cards",
          style: TextStyle(
            fontFamily: 'Quicksand',
            fontSize: 31,
            color: Colors.black,
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
      Divider(color: Colors.black38),
      const SizedBox(
        height: 20,
      ),
      Expanded(
          child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        children: _listItem
            .map((item) => Card(
                  color: Colors.transparent,
                  elevation: 0,
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        image: DecorationImage(
                            image: AssetImage(item), fit: BoxFit.cover)),
                  ),
                ))
            .toList(),
      ))
    ],
  ),
);
 }
}

................................................ ..................................................... ..................................................... ..................................................... ..................................................... .....................

Answer 1

您可以创建另一个 link 列表并通过索引访问 gridview 中的那些 link，就像您处理图像路径一样。您还可以使用列表，其中每个地图都可以包含 imagePath 和 link，并在您的 gridview 构建器中相应地分配它。

Answer 2

我把代码发给你了，你试试看，看不懂就告诉我。在 link 内设置您要导航的路径。而且你还需要为每个页面添加名称路由（如果你不知道问我）。 onTap 会将您导航到您在上面的地图 _listItems 中添加的所需页面。

    final List<Map> _listItem = [
    {'img': 'assets/image.jpeg', 'link': 'YourPageName'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: MediaQuery.of(context).size.height,
            decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/food2.png'),
                    fit: BoxFit.cover)),
          ),
          const Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "Donation Cards",
              style: TextStyle(
                fontFamily: 'Quicksand',
                fontSize: 31,
                color: Colors.black,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          const Divider(color: Colors.black38),
          const SizedBox(
            height: 20,
          ),
          Expanded(
              child: GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            children: _listItem
                .map((item) => Card(
                      color: Colors.transparent,
                      elevation: 0,
                      child: GestureDetector(
                        onTap: () {
                          //Navigate to the desired page according to the map
                          //you can also check the index here of item list and navigate accordingly without creating map
                          Navigator.of(context).pushNamed(item['link']);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              image: DecorationImage(
                                  image: AssetImage(item['img']),
                                  fit: BoxFit.cover)),
                        ),
                      ),
                    ))
                .toList(),
          ))
        ],
      ),
    );
  } ```

Flutter：在 gridview 上添加单独的链接

Flutter: Adding Individual links to on a gridview

gridview

dart

flutter