【问题标题】:Flutter's ListView needs clickable elements, and leading images don't show in ListTileFlutter的ListView需要可点击元素,而ListTile中不显示前导图
【发布时间】:2020-01-06 12:14:35
【问题描述】:

我正在使用 ListView 在 Dart/Flutter 中编写一个小型应用程序(显示来自 Internet 的数据 - 文本和图像)。我有两个问题,两个在这段代码中解决。

这是我的代码(在 ListView 中显示数据的部分):

  ListView _testsListView(data) {
    return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return _tile(data[index].title, data[index].lead, data[index].href, data[index].imageHref);
        });
  }

  ListTile _tile(String title, String lead, String href, String imageHref) => ListTile(

    subtitle: Text(lead,
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 12,
          color: Colors.green,
        )),
    title: Text(title,
      style: TextStyle(color: Colors.blue),
    ),
    leading: CachedNetworkImage(
      imageUrl: imageHref,
      fit: BoxFit.cover,
      alignment: Alignment.centerLeft,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    ),
  );
}

void launchWeb(String URL) async
{
    if (await canLaunch(URL)) {
      await launch(URL);
    } else {
      throw 'Could not launch $URL';
    }
}

第一个问题是我需要可点击元素,ListView的一个元素:

标题(标题在这里),

副标题(lead在我的代码中),

领先(带有 imageHref 的图像),

...需要可点击。当用户单击时,它应该打开一个 URL 为 href 的网站(在默认的 Web 浏览器中)。我尝试了来自 Internet 的随机代码并尝试使用 flutter_linkify 和 url_launcher,但它不起作用。 另一方面,当我使用 onTap 时:应用程序会自动(不按任何按钮)打开网页,这当然不是这里所希望的。

第二个问题是我需要 ListView 中的图像(前导属性)。我想从某个地址以 htpps:// 开头的网站使用的图片,但出现“握手”错误:

(2) Exception caught by image resource service ════════════════════════════════════════════
Handshake error in client (OS Error: 
    CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate(handshake.cc:354))

我使用了 Image.network(),但它不起作用(我已经读过这个方法改变了用户代理),所以我决定使用 CachedNetworkImage,但仍然无法查看这些图像。图片的 URL 是正确的,当我从 Chrome 浏览器使用它们时,查看图片没有问题。

【问题讨论】:

  • On the other hand, when I use onTap: application automatically (without pressing anything) opens web page, which is of course not desired here. 你能说明你是如何使用onTap的吗?
  • 我使用 - 我记得 - 那样:onTap: launchWeb(href);
  • 这样使用它:onTap: ()=>launchWeb(href)。它打开 WebView 而不单击的原因是您在分配时调用了该函数。
  • 好的,Lambda 表达式。我现在看到了我的错误。谢谢。
  • 我只能将 onTap 与整个 ListTile 一起使用,但如何将它与一个元素一起使用:标题、副标题或前导?

标签: listview flutter dart


【解决方案1】:
   return ListTile(
            onTap:(){
            //list tile tap
              }
             ),
             title: InkWell(
                 child: Text('Title'),
                 onTap:(){
               //title tap
                 }
             ),
             subtitle:InkWell(
                 child: Text('Sub Title'),onTap:(){
               //sub title tap
                 }
             ),),
             leading:InkWell(
                 onTap:(){
                 //title tap
                  }
                 ),
                 child: CachedNetworkImage(
                      imageUrl: imageHref,
                      fit: BoxFit.cover,
                      alignment: Alignment.centerLeft,
                      placeholder: (context, url) => CircularProgressIndicator(),
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),
                  )
                )

【讨论】:

  • 对我不起作用。出现错误:“未定义子参数”
  • 你可以找到出错的那一行!你试过什么?邮政编码!
  • 我将您的代码粘贴到我的 ListTitle 定义中,第一次出现“子”字时显示错误。
  • 更改网址并尝试将缓存的网络图像的小部件更改为其他网络图像!
  • 我会听从你的建议。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-16
  • 1970-01-01
  • 2014-10-03
相关资源
最近更新 更多