Flutter - 在列表調用中使用 onTap

Question

我知道的小亂碼。

嘗試使用 categoriesList 讓 onTap 切換到另一個頁面，但出現“返回類型 'String' 不是 'Widget'，如閉包上下文所要求的那樣”的錯誤。 不完全確定下一個代碼應該在這里。

List<Category> categoriesList = [
  Category(name: "nameA", image: "imageA.png", page: "page1"),
  Category(name: "nameB", image: "imageB.png", page: "page2"),
  Category(name: "nameC", image: "imageC.png", page: "page3"),
  Category(name: "nameD", image: "imageD.png", page: "page4"),
  Category(name: "nameE", image: "imageE.png", page: "page5"),
  Category(name: "nameF", image: "imageF.png", page: "page6"),
];

child: Padding(
                            padding: EdgeInsets.all(4.0),
                            child: GestureDetector(
                              onTap: (){
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                    builder: (context) => categoriesList[index].page));
                              },
                              child: Image.asset(
                                "assets/images/${categoriesList[index].image}",
                                width: 100,
                                height: 100,
                              ),
                            ),
                          ),

Main.dart文件

import 'package:app/screens/page1.dart';
import 'package:app/screens/page2.dart';
import 'package:app/screens/home.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => page1(),
        '/second' : (context) => page2(),
      },
      title: 'My App',
      theme: ThemeData(appBarTheme: AppBarTheme(color:Colors.blue, centerTitle: true)
      ),
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

Answer 1

問題是，當您應該傳遞一個小部件時，您正在傳遞一個字符串：

                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                builder: (context) => categoriesList[index].page1));

builder: (context) => categoriesList[index].page1));

這里的Builder 需要一個Widget，例如MyPage1(categoriesList[index])而不是String。 如果你想導航，使用字符串作為 RouteName，你應該使用類似的東西

  Navigator.pushNamed(
     context,
     categoriesList[index].page);

然后，列表中的名稱必須與main.dart中的路由匹配，例如：

你的清單

  Category(name: "nameA", image: "imageA.png", page: "/page1"),
  Category(name: "nameB", image: "imageB.png", page: "/page2"),
  Category(name: "nameC", image: "imageC.png", page: "/page3"),
  ...

而你的路線在 main.dart

      routes: {
...
    '/page1': (context) => page1(),
    '/page2' : (context) => page2(),
    '/page3':(context) => page3(),...
  },