Flutter如何将页面类存储到变量实现列表项点击跳转不同页面

你当前的错误是将页面实例以字符串格式存储，Get.to() 接收的是Widget实例或返回Widget的回调函数，无法直接把字符串解析为对应的页面类实例，同时原有代码的onTap回调里还存在多余右括号的语法错误。

直接修改ItemMenu类的page字段类型，不需要额外配置，类型安全无冗余：

1. 修改ItemMenu类定义 #

class ItemMenu extends StatelessWidget {
  final String image;
  final String title;
  // 将原来的String类型改为返回Widget的函数类型
  final Widget Function() page;
  const ItemMenu({
    Key? key,
    required this.image,
    required this.title,
    required this.page,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 直接传入page回调即可，修复原有多余括号的语法问题
        Get.to(page);
      },
      child: Container(
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(right: 20, bottom: 10, top: 10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                offset: Offset(0, 10),
                blurRadius: 20,
                color: Color(0xFF4056C6).withOpacity(.15),
              )
            ]),
        child: Column(
          children: <Widget>[
            Image.asset(
              image,
              height: 90,
            ),
            Text(
              title,
              style: TextStyle(fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

2. 修改列表项调用代码 #

去掉page参数的引号，直接传递页面构造回调：

ItemMenu(
  image: "assets/images/logo.png",
  title: "Agama",
  page: () => Agama_page(),
),
ItemMenu(
  image: "assets/images/logo.png",
  title: "Gender",
  page: () => Gender_page(),
),
ItemMenu(
  image: "assets/images/logo.png",
  title: "Geografi",
  page: () => Geografi_page(),
)

如果你的项目未开启空安全，删除代码中的Key?的问号和required关键字即可。

如果你的项目页面较多，需要统一管控路由，可以使用GetX的命名路由方案：

1. 全局注册路由表 #

在GetMaterialApp配置中添加路由映射：

GetMaterialApp(
  // 其他原有配置不变
  getPages: [
    GetPage(name: '/agama', page: () => Agama_page()),
    GetPage(name: '/gender', page: () => Gender_page()),
    GetPage(name: '/geografi', page: () => Geografi_page()),
  ],
);

2. 修改ItemMenu类定义 #

class ItemMenu extends StatelessWidget {
  final String image;
  final String title;
  // 存储路由名
  final String routeName;
  const ItemMenu({
    Key? key,
    required this.image,
    required this.title,
    required this.routeName,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(routeName);
      },
      // 剩余布局代码和原有一致
    );
  }
}

3. 修改列表项调用代码 #

ItemMenu(
  image: "assets/images/logo.png",
  title: "Agama",
  routeName: '/agama',
),
ItemMenu(
  image: "assets/images/logo.png",
  title: "Gender",
  routeName: '/gender',
),
ItemMenu(
  image: "assets/images/logo.png",
  title: "Geografi",
  routeName: '/geografi',
)

内容的提问来源于stack exchange，提问作者lukman azhari