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]) 而不是字符串。 如果您想导航，使用字符串作为 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(),...
  },