Flutter使用Navigator按索引跳转时如何动态加载对应服务页面

你可以通过「服务标识与页面的映射匹配」实现动态加载，以下是两种常用实现方案：

方案1：映射表快速实现（适合服务数量较少的场景） #

直接在ServiceDetailScreen内定义服务标识和对应页面的映射关系，根据传入的service属性匹配返回对应页面：

class ServiceDetailScreen extends StatelessWidget {
  const ServiceDetailScreen({Key? key, required this.service})
      : super(key: key);

  final Service service;

  // 定义服务标识和对应页面的映射逻辑，匹配字段可以用service的categoryId或者categoryName
  Widget getServicePage() {
    switch (service.categoryName) {
      case "上门配送":
        return const HomeDeliveryScreen();
      case "洗衣服务":
        return const LaundryServiceScreen();
      case "管道维修":
        return const PlumbingServiceScreen();
      // 其他服务页面可在此处扩展
      default:
        // 未匹配到服务时的兜底页面
        return const Center(child: Text("该服务暂未开放"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(service.categoryName),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.notifications),
          ),
        ],
      ),
      body: Container(
        // 直接调用方法返回对应页面即可
        child: getServicePage(),
      ),
    );
  }
}

方案2：枚举标准化实现（适合服务数量多、迭代频繁的场景） #

如果后续服务会持续新增，建议先给服务类型定义枚举，避免硬编码字符串出错：

1. 先定义服务类型枚举

enum ServiceType {
  homeDelivery,
  laundry,
  plumbing,
  // 其他服务类型可在此处扩展
}

2. 给Service类新增serviceType字段，类型为ServiceType
3. 修改ServiceDetailScreen的匹配逻辑：

Widget getServicePage() {
  switch (service.serviceType) {
    case ServiceType.homeDelivery:
      return const HomeDeliveryScreen();
    case ServiceType.laundry:
      return const LaundryServiceScreen();
    case ServiceType.plumbing:
      return const PlumbingServiceScreen();
    default:
      return const Center(child: Text("该服务暂未开放"));
  }
}

功能界面参考 #

内容的提问来源于stack exchange，提问作者Nikash Deka