时间戳

首页 > 解决方案 > 在 Flutter 中将多个图像超链接到多个 URL

image - 在 Flutter 中将多个图像超链接到多个 URL

问题描述

初学者在这里......我已经读过这个：Hyperlinking an image to an URL in Flutter And this: https://pub.dev/packages/url_launcher

但无法找到一种合理的方法来为我正在使用的图像的 GridView 添加超链接

    Container(
              height: 750,
              width: 250,
              child: GridView.count(
                primary: false,
                padding: const EdgeInsets.all(8),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 2,
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(1),
                    child: Image.asset('assets/Img-Aaron.jpg'),
                    color: Colors.black,
                  ),
                  Container(
                    padding: const EdgeInsets.all(1),
                    child: Image.asset('assets/Img-Alex.jpg'),
                    color: Colors.black,
                  ),
                  Container(
                    padding: const EdgeInsets.all(1),
                    child: Image.asset('assets/Img-Ander.jpg'),
                    color: Colors.black,
                  ),
                  Container(
                    padding: const EdgeInsets.all(1),
                    child: Image.asset('assets/Img-Paul.jpg'),
                    color: Colors.black,

我希望用户能够单击图像并转到该图像的指定 URL。

到目前为止，我看到的所有示例代码都只演示了一个图像和一个 OnTap: 或 OnPressed: 并且通常以这样的代码结尾：

    _launchURL() async {
const url = 'https://flutter.io';
if (await canLaunch(url)) {
  await launch(url);
} else {
  throw 'Could not launch $url';
}

}

关于我如何简单地做到这一点的任何建议或指示？例如，使用这样的 Url 列表：

const _url1 = 'https://www.linkedin.com/in/Examplea/';
const _url2 = 'https://www.linkedin.com/in/Exampleb/';
const _url3 = 'https://www.linkedin.com/in/Examplec/';
const _url4 = 'https://www.linkedin.com/in/Exampled/';
const _url5 = 'https://www.linkedin.com/in/Examplee/';
const _url6 = 'https://www.linkedin.com/in/Examplef/';
const _url7 = 'https://www.linkedin.com/in/Exampleg/';
const _url8 = 'https://www.linkedin.com/in/Exampleh/';
const _url9 = 'https://www.linkedin.com/in/Examplei/';
const _url0 = 'https://www.linkedin.com/in/Examplej/';
const _url11 = 'https://www.linkedin.com/in/Examplek/';
const _url12 = 'https://www.linkedin.com/in/Examplel/';
const _url13 = 'https://www.linkedin.com/in/Examplem/';
const _url14 = 'https://www.linkedin.com/in/Examplen/';

谢谢你。

标签： imageflutterurlflutter-web

解决方案

我建议重构代码并分离出Container. 让我们暂时调用它ProfileCard，它可以包含如下代码：

import 'package:flutter/material.dart';

class ProfileCard extends StatelessWidget {
  final String imagePath;
  final VoidCallback onTap;
  
  const ProfileCard({
    required this.imagePath,
    required this.onTap,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(1),
        child: Image.asset(imagePath),
        color: Colors.black,
      ),
    );
  }
}

现在，在 this 中onTap，您可以传递该_launchUrl()方法，但在参数中使用 String。

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

现在，您的 GridView 将如下所示：

Container(
  height: 750,
  width: 250,
  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(8),
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    crossAxisCount: 2,
    children: <Widget>[
      ProfileCard(imagePath: 'assets/Img-Aaron.jpg', onTap: _launchUrl(_url1)),
      ProfileCard(imagePath: 'assets/Img-Alex.jpg', onTap: _launchUrl(_url2)),
      ProfileCard(imagePath: 'assets/Img-Ander.jpg', onTap: _launchUrl(_url3)),
    ],
  ),
)

使用上面的这些常量：

const _url1 = 'https://www.linkedin.com/in/Examplea/';
const _url2 = 'https://www.linkedin.com/in/Exampleb/';
const _url3 = 'https://www.linkedin.com/in/Examplec/';

我希望这可以澄清您的查询。如果您需要更多帮助，可以通过ahmadkhan.dev与我联系

推荐阅读