Flutter open url 根据图片点击

Question

我需要做一些类似 'hyperlink' 的 url 到 image/List()。目前我正在制作一个 UI，单击 image 后，它将打开一个特定的 url。我还制作了一个 search list，我想通过单击 topic 来实现，它将打开相应的 url。例如，点击 imageA 将打开 https://example.com/data1.html 和 imageD https://example.com/data4.html，topicA 将打开 https://example.com/data1.html 和 topicD https://example.com/data4.html。我应该使用 url_launcher 还是 WebView 来显示 html 页面？谢谢。

代码

...

  child:Container(
                      height: MediaQuery.of(context).size.height - 200.0 ,
                      child: ListView.builder(
                      padding: EdgeInsets.all(8.0),
                      itemBuilder: (context, index) {
                       return buildCalc(data[index],context);
                      },
                      itemCount: data.length,
                      ),
                      )
...

使用 buildCalc 函数插入图像

Widget buildCalc(Data data,context){
  return Padding(
    padding: EdgeInsets.only(left:10.0, right:10.0, top:10.0),
    child: InkWell(
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder:(context)=>Opticsdata(data: data,)),);
        },
...
                    Hero(
                        tag: data.id,
                        child: Image(
                          image: AssetImage(data.image),
                        )
                 children: [
                        Text(
                          data.id,
                          ),
 ...

...

var url ="https://example.com/data1.html";
   
  @override
  Widget build(BuildContext context) {
    print("url:" + url);
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
    body: WebView(
          javascriptMode: JavascriptMode.unrestricted,  
          initialUrl: url,    
          onWebViewCreated: (WebViewController webViewController) {   
            controller = webViewController;
          }),
  

  }
}


 class Data{
  String image;
  String id;
  Data({this.id,this.image});
}
List<Data> data = [
  Data(id: '01',image: 'img/O1-resize.png'),
  Data(id: '02',image: 'img/O2-resize.png'),
  Data(id: '03',image: 'img/O3-resize.png'),
  Data(id: '04',image: 'img/O4-resize.png'),
  Data(id: '05',image: 'img/O5-resize.png')
];

数据文件

编辑

之前的编码很乱，我做了一个更简单的版本。如果有人需要，下面是代码。

...
 children: ListTile.divideTiles
                (
                  context: context,
                  tiles: 
                  [
                  ListTile
                  (
                    leading: CircleAvatar(
                       radius: 50,
                    backgroundImage: AssetImage("img/I1-resize.png"), // no matter how big it is, it won't overflow
                    ),
                    title: Text("Angular resolution calculator"),
                     onTap: (){
                    _launch('https://example.com/data1.html');
                    },
                  ),
                  ListTile
                  (
                    leading: CircleAvatar(
                       radius: 50,
                    backgroundImage: AssetImage("img/I2-resize.png"), // no matter how big it is, it won't overflow
                    ),
                    title: Text("Diffraction limit calculator"),
                     onTap: (){
                    _launch('https://example.com/data2.html');
                    },
                  ),
                  
                ]
                ).toList(),
...

这将创建带有图像的 Listview，并且 onTap 将通过 url_launcher 启动 url。

Future<void> _launch(String url) async{
  
  
    if (await canLaunch(url)) { 
      
      await launch(url, forceSafariVC: true, forceWebView: true , enableJavaScript: true,); 
      
    } else { 
      throw 'Could not launch $url'; 
    } 
}

Answer 1

为此尝试 url url_launcher 5.7.10，

  new Center(
          child: new InkWell(
              child: new Text('Medium Article', style: TextStyle(
                decoration: TextDecoration.underline,
              ),
              ),
              onTap: () => launch('https://shirsh94.medium.com/android-11-top-new-11-features-for-android-a83c3b0fe4fe')
          ),
        ),

Answer 2

你应该使用 pub.dev

中的 Url_package

Center(
      child: new InkWell(
          child: new Text('Open Image', style: TextStyle(
            decoration: TextDecoration.underline,
          ),
          ),
          onTap: () => launch('www.google.com')
      ),
    ),

Answer 3

使用前面提到的 url 启动包，但是，因为它是异步的，所以不要忘记检查您的 link 是否准备就绪。（它也在包文档中）。

例如创建启动class:

import 'package:url_launcher/url_launcher.dart';

class Launch {
  static void launchUrl(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

然后你可以在任何地方调用它:

Center(
      child: new InkWell(
          child: new Text('Open Image', style: TextStyle(
            decoration: TextDecoration.underline,
          ),
          ),
          onTap: () => Launch.launchUrl(url)
      ),
    ),

Flutter open url 根据图片点击

Flutter open url according to image clicked

html

android

webview

ios

flutter