Flutter中如何实现分类菜单点击后跳转至对应页面的功能？

你的现有代码已经预留了press点击回调参数，只需要给每个菜单绑定对应的页面跳转逻辑即可，具体操作如下：

• 第一步：创建4个业务页面
  先以考勤页面为例给出基础示例，其余三个页面按照相同逻辑创建即可：

// lib/pages/absensi_page.dart
import 'package:flutter/material.dart';

class AbsensiPage extends StatelessWidget {
  const AbsensiPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("考勤页面")),
      body: const Center(child: Text("这是考勤页面的业务内容")),
    );
  }
}

按照相同格式创建IjinPage（请假页面）、KalenderPage（日历页面）、ScannerPage（扫码页面），按需填充业务逻辑即可。

• 第二步：修改Categories组件的跳转逻辑
  给categories数组每个元素增加页面对应映射，再给press参数绑定跳转逻辑，修改后的代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
// 引入你创建的四个页面，路径替换为你项目的实际路径
import 'path/to/absensi_page.dart';
import 'path/to/ijin_page.dart';
import 'path/to/kalender_page.dart';
import 'path/to/scanner_page.dart';

import '../../../size_config.dart';

class Categories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> categories = [
      {"icon": "assets/icons/Flash Icon.svg", "text": "Absensi", "targetPage": const AbsensiPage()},
      {"icon": "assets/icons/Bill Icon.svg", "text": "Ijin", "targetPage": const IjinPage()},
      {"icon": "assets/icons/Game Icon.svg", "text": "kalender", "targetPage": const KalenderPage()},
      {"icon": "assets/icons/Gift Icon.svg", "text": "Scanner", "targetPage": const ScannerPage()},
    ];
    return Padding(
      padding: EdgeInsets.all(getProportionateScreenWidth(20)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: List.generate(
          categories.length,
          (index) => CategoryCard(
            icon: categories[index]["icon"],
            text: categories[index]["text"],
            press: () {
              // 点击跳转对应页面
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => categories[index]["targetPage"]),
              );
            },
          ),
        ),
      ),
    );
  }
}

// 原有CategoryCard类代码不需要做任何修改，保持现有逻辑即可

注意：如果你的项目使用命名路由管理页面跳转，只需将数组中的页面实例替换为对应的路由名称字符串，跳转时调用Navigator.pushNamed(context, 路由名称)即可，整体逻辑完全一致。

内容的提问来源于stack exchange，提问作者16_Hafidz Fadhillah Febrianto