如何将图像 URL 链接到另一个 URL 以在颤动中显示有关第一个 URL 的一些信息?

Posted

技术标签:

【中文标题】如何将图像 URL 链接到另一个 URL 以在颤动中显示有关第一个 URL 的一些信息?【英文标题】:How does one link an image URL to another URL to display some information about the first URL in flutter? 【发布时间】:2021-12-20 11:00:06 【问题描述】:

我正在尝试创建一个超链接来链接我的代码中的每个图像的 URL,以便用户可以被引导到另一个页面,其中包含有关单击的图像的信息。我该怎么做呢?

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget 
  const ProfilePage(Key? key) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();


class _ProfilePageState extends State<ProfilePage> 
  // This holds a list of fiction users
  // You can use data fetched from a database or a server as well
  final List<Map<String, dynamic>> _allHerbs = [
    
      "id": 1,
      "name": "plant1",
      "urlImage":
          'https://www.southernexposure.com/media/products/originals/sweet-genovese-basil-809aaf7e3d9a3f3fa7ce2f0eb4480e95.jpg'
    ,
    "id": 2, "name": "plant2", "urlImage": '',
    "id": 3, "name": "plant3", "urlImage": '',
    "id": 4, "name": "plant4", "urlImage": '',
    "id": 5, "name": "plant5", "urlImage": '',
    "id": 6, "name": "plant6", "urlImage": '',
    "id": 7, "name": "plant7", "urlImage": '',
    "id": 8, "name": "plant8", "urlImage": '',
    "id": 9, "name": "plant9", "urlImage": '',
    "id": 10, "name": "plant10", "urlImage": '',
  ];

  // This list holds the data for the list view
  List<Map<String, dynamic>> _foundHerbs = [];
  @override
  initState() 
    // at the beginning, all users are shown
    _foundHerbs = _allHerbs;
    super.initState();
  

  // This function is called whenever the text field changes
  void _runFilter(String enteredKeyword) 
    List<Map<String, dynamic>> results = [];
    if (enteredKeyword.isEmpty) 
      // if the search field is empty or only contains white-space, we'll display all users
      results = _allHerbs;
     else 
      results = _allHerbs
          .where((user) =>
              user["name"].toLowerCase().contains(enteredKeyword.toLowerCase()))
          .toList();
      // we use the toLowerCase() method to make it case-insensitive
    

    // Refresh the UI
    setState(() 
      _foundHerbs = results;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: const Text('Herb Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            const SizedBox(
              height: 20,
            ),
            TextField(
              onChanged: (value) => _runFilter(value),
              decoration: const InputDecoration(
                  labelText: 'Search', suffixIcon: Icon(Icons.search)),
            ),
            const SizedBox(
              height: 20,
            ),
            Expanded(
              child: _foundHerbs.isNotEmpty
                  ? ListView.builder(
                      itemCount: _foundHerbs.length,
                      itemBuilder: (context, index) => Card(
                        key: ValueKey(_foundHerbs[index]["id"]),
                        color: Colors.blueAccent,
                        elevation: 4,
                        margin: const EdgeInsets.symmetric(vertical: 10),
                        child: ListTile(
                          leading: Text(
                            _foundHerbs[index]["id"].toString(),
                            style: const TextStyle(fontSize: 24),
                          ),
                          title: Text(_foundHerbs[index]['name']),
                          subtitle: Image.Network('$_foundHerbs[index]["urlImage"] '),
                        ),
                      ),
                    )
                  : const Text(
                      'No results found',
                      style: TextStyle(fontSize: 24),
                    ),
            ),
          ],
        ),
      ),
    );
  

【问题讨论】:

您可以使用TextButton 并在onPressed 方法上使用the URL launcher package 的启动方法 @h8moss 这应该作为答案而不是评论发布。评论是临时的,不能被接受为答案。没有将 cmets 转换为答案的机制,所以我不能为你做。您需要将您的评论复制到答案框中,然后删除您的评论。 【参考方案1】:

如果我理解您的问题,对于点击的每张图片,您都希望被定向到包含该图片相关信息的另一个页面。

一种方法是:

    对于正在获取的数据,您可以修改为:"id": 2, "name": "plant2", "urlImage": '', **"urlInfo" :""**

    由于您想启动一个 url,您可以使用 **url_launcher package** 或合适的包,具体取决于您想要访问信息的方式。如果您想在应用内访问信息,请使用 WebView 包。

    您正在使用 ListTile,因此您可以这样做: 使用 url_launcher 包时

     ListTile(
     onTap: () async
              await launch('$_foundHerbs[index]["urlInfo"] ');
     ,
    ),
    

或者对于类似flutter_webview_plugin的东西,你可以这样做:

ListTile(
onTap: ()
          Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => WebviewScaffold(
      url: '$_foundHerbs[index]["urlInfo"] ',
      appBar: new AppBar(
        title: new Text("Image Information"),
        withjavascript: true,
      ),
    ),
   ),
  );
,
),

【讨论】:

以上是关于如何将图像 URL 链接到另一个 URL 以在颤动中显示有关第一个 URL 的一些信息?的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动中从 api url 加载图像?

如何确保我在颤动中的图像 url 不会显示在屏幕上而不是图像上?

如何使用 javascript 将多个图像上传到 cloudinary 并将 url 发送到另一个数据库

带有颤动的 Firebase 动态链接:深层链接 URL 未打开应用程序

无法从 URL 获取图像以在 UIImage 中快速更新

如何从一个类屏幕获取值到另一个类并在颤动中填充这些值?