Flutter中如何为GridView内的多张图片分别绑定对应跳转URL

你可以通过以下3个步骤快速实现需求：

步骤1：调整URL跳转方法，支持动态传入目标地址 #

把你现有写死URL的跳转方法改成可接收参数的版本：

_launchURL(String targetUrl) async {
  if (await canLaunch(targetUrl)) {
    await launch(targetUrl);
  } else {
    throw 'Could not launch $targetUrl';
  }
}

如果你用的是v6及以上版本的url_launcher，官方更推荐用新的API写法：

_launchURL(String targetUrl) async {
  final Uri url = Uri.parse(targetUrl);
  if (!await launchUrl(url)) {
    throw 'Could not launch $targetUrl';
  }
}

步骤2：整理图片和URL的对应关系 #

你可以把分散的URL和对应的图片资源整理成一个配对列表，方便后续维护，不用手动给每个图片单独绑事件：

// 按你图片的顺序依次排列，顺序和你GridView里的图片顺序一一对应即可
final List<Map<String, String>> imgItems = [
  {"imgPath": "assets/Img-Aaron.jpg", "url": "https://www.linkedin.com/in/Examplea/"},
  {"imgPath": "assets/Img-Alex.jpg", "url": "https://www.linkedin.com/in/Exampleb/"},
  {"imgPath": "assets/Img-Ander.jpg", "url": "https://www.linkedin.com/in/Examplec/"},
  {"imgPath": "assets/Img-Paul.jpg", "url": "https://www.linkedin.com/in/Exampled/"},
  // 剩下的图片按顺序补全即可
];

步骤3：改造GridView子项，添加点击事件 #

你可以直接用InkWell（自带点击水波纹效果，体验更好）或者GestureDetector包裹每个图片容器，绑定点击跳转逻辑。如果用上面的配对列表，还可以直接通过生成的方式构建子项，不用重复写冗余代码：

Container(
  height: 750,
  width: 250,
  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(8),
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    crossAxisCount: 2,
    // 直接用List.generate生成所有子项，不用手动重复写Container
    children: List.generate(imgItems.length, (index) {
      final item = imgItems[index];
      return InkWell(
        onTap: () => _launchURL(item['url']!),
        child: Container(
          padding: const EdgeInsets.all(1),
          child: Image.asset(item['imgPath']!),
          color: Colors.black,
        ),
      );
    }),
  ),
)

如果你不想改现有的手动写Container的结构，也可以直接给每个Container单独套InkWell，绑定对应的URL即可，示例：

// 单个图片的改造示例，其他图片同理
InkWell(
  onTap: () => _launchURL(_url1),
  child: Container(
    padding: const EdgeInsets.all(1),
    child: Image.asset('assets/Img-Aaron.jpg'),
    color: Colors.black,
  ),
)

内容的提问来源于stack exchange，提问作者Michael Alcock