我将如何包装图像 url 的字幕，以便它通向另一个屏幕？

Posted 2023-02-23

【中文标题】我将如何包装图像 url 的字幕，以便它通向另一个屏幕？

【英文标题】：How would I wrap the subtitle for the image url so that it leads to another screen?

【发布时间】：2021-12-19 04:04:28

【问题描述】：

我试图让用户单击图片并允许他们获取有关该图片的信息，我该怎么做？我正在考虑将字幕（带有图像 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),
                    ),
            ),
          ],
        ),
      ),
    );
  

【问题讨论】：

插入废话（或重复自己）以绕过最小文本长度要求是一个非常糟糕的主意，并且违反了网站政策。今后请不要这样做。

情况并非如此，我试图在没有重复文本的情况下发送问题，但出现错误

而你得到错误的原因是因为你没有使用足够的文字来描述问题，通过重复自己或添加噪音来解决它不是正确的解决方案。正确的解决方案是添加更多适当的内容，而不是杂乱无章。如果您在开始发帖之前花一些时间在tour 和阅读help center 页面以了解该网站的工作原理，您会发现您在这里的体验会好得多，正如您在此处创建帐户时所建议的那样（但你选择忽略）。

您在编写时应该做的第一件事是我遇到了一些错误，所以我想知道如何解决这个错误是添加关于具体内容的详细信息这些错误包括准确、完整的错误消息。如果您不解释您遇到的问题是什么，我们将无法帮助您解决。

【参考方案1】：

首先，您不需要使用另一个小部件来处理点击事件。 ListTile 已经有了onTap: 回调方法。

其次，您的subtitle 有两个问题，Image.Network 将是Image.network 并在 url-part 上提供具有额外空间的路径，或者您可以使用 likeImage.network( _foundHerbs[index]["urlImage"],),。

ListTile 会像

child: ListTile(
  onTap: () 
    print(_foundHerbs[index].toString());
  ,
  leading: Text(
    _foundHerbs[index]["id"].toString(),
    style: const TextStyle(fontSize: 24),
  ),
  title: Text(_foundHerbs[index]['name']),
  subtitle: Container(
    color: Colors.amber,
    child: Image.network(
      '$_foundHerbs[index]["urlImage"]',
    ),
  )),

【讨论】：

这个答案很好，但是，当用户触摸图片时，我如何让用户进入另一个页面

看到我有加载图片的URL，我如何将同一张图片使用不同的URL连接到新页面

可以通过路由传递信息，

你能给我举个例子吗？

你可以查看这个answer