如何将图像 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 的一些信息?的主要内容,如果未能解决你的问题,请参考以下文章
如何确保我在颤动中的图像 url 不会显示在屏幕上而不是图像上?
如何使用 javascript 将多个图像上传到 cloudinary 并将 url 发送到另一个数据库