如何將圖片URL鏈接到另一個URL以顯示有關flutter中第一個URL的一些資訊？

我正在嘗試創建一個超鏈接來鏈接我的代碼中每個影像的 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),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

如果我理解您的問題，對于點擊的每張圖片，您都希望被定向到包含有關該圖片的資訊的另一個頁面。

一種方法是：

1. 對于正在獲取的資料，您可以修改為： {"id": 2, "name": "plant2", "urlImage": '', **"urlInfo" :""**}

2. 由于您想啟動一個 url，您可以使用**url_launcher package**或 一個合適的包，這取決于您希望如何訪問資訊。如果您想訪問應用程式內的資訊，請使用 WebView 包。

3. 您正在使用 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,
      ),
    ),
   ),
  );
},
),

標籤：图片 扑 网址 超链接 手势检测器

上一篇：SQLServer：如何根據最近的日期時間檢索所有記錄

下一篇：VB.Net相當于共享方法的“This”