如何将一个 link 图像 URL 转换为另一个 URL 以在 flutter 中显示有关第一个 URL 的一些信息？

Question

我正在尝试为我的代码中的每个图像 URL 创建一个 hyperlink 到 link，这样用户就可以被引导到另一个包含图像信息的页面那被点击了。我该怎么做？

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),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 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,
      ),
    ),
   ),
  );
},
),

如何将一个 link 图像 URL 转换为另一个 URL 以在 flutter 中显示有关第一个 URL 的一些信息？

How does one link an image URL to another URL to display some information about the first URL in flutter?

url

image

hyperlink

gesturedetector

flutter