根据点击的图像颤动打开网址答案

【问题标题】：Flutter open url according to image clicked根据点击的图像颤动打开网址
【发布时间】：2021-02-21 04:34:44
【问题描述】：

我需要将url 链接到image/List()。目前我正在制作UI，单击image 后，它将打开一个特定的url。我也做了一个search list，我想在点击topic时实现它会打开相应的url。比如点击imageA会打开https://example.com/data1.html和imageDhttps://example.com/data4.html，topicA会打开https://example.com/data1.html和topicDhttps://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'; 
    } 
}

【问题讨论】：

请将您的代码缩短为最小代码；它是如此难以理解，以至于没有人能找到代码中隐藏实际问题的位置。

标签： android html ios flutter webview

【解决方案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')
          ),
        ),

【讨论】：

【解决方案2】：

你应该使用来自 pub.dev 的Url_package

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

【讨论】：

【解决方案3】：

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

例如创建启动类：

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)
      ),
    ),

【讨论】：