如何使用 Flutter 將“ListView”中的圖像用作指向另一個“視圖”（頁面）的鏈接？

Question

當我觸摸界面上的圖像時，我無法進入下一頁？ 我試圖設置一個類別 Listview。 listview 保存圖像，當用戶觸摸圖像時如何設置它，以便他們可以 go 到下一頁？

編碼

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'custom_textW.dart';

class Category {
  final String name;
  final String image;

  Category({@required this.name, @required this.image});
}
List<Category> categoriesList = [
  Category(name: "Sarapan", image: "nasilemak.png"),
  Category(name: "Kuih", image: "kuih.png"),
  Category(name: "Makan Tengahari", image: "lunch.png"),
  Category(name: "Minum Petang", image: "mnmptg.png"),
  Category(name: "Makan Malam", image: "mknmlm.png"),
  Category(name: "Minum Malam", image: "mnmmlm.png"),
  Category(name: "Minuman", image: "air2.png"),
];
class Categories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 109,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categoriesList.length,
        itemBuilder: (_, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(color: Colors.white, boxShadow: [
                    BoxShadow(
                        color: Colors.red[200], offset: Offset(4, 6), blurRadius: 20)
                  ]),
                  //tambah di sini kalau nk gesture
                  child: Image.asset(
                        "images/${categoriesList[index].image}",
                        width: 80,
                      ),
                ),
                SizedBox(
                  height: 5,
                ),
                CustomText(
                  text: categoriesList[index].name,
                  size: 14,
                  colors: Colors.black,
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

列表視圖的樣子：

現在當我試圖觸摸圖像時，什么都不會發生。 它只是顯示圖像。

Answer 1

您可以將圖像小部件包裝在 InkWell 小部件中並實現 onTap() 方法以導航到下一頁。

child: InkWell(
   onTap: ()=> NavigateToPage(),
   child: Image.asset(
          "images/${categoriesList[index].image},
          width: 80,
   ),
),

Answer 2

您可以像這樣使用GestureDetector包裝您的圖像：

child: GestureDetector(
    onTap: // go to next page,
    child: Image.asset(
        "images/${categoriesList[index].image}",
        width: 80,
    ),
),