如何在Flutter中实现基于车型的动态汽车服务价格列表？

核心思路 #

通过区分用户车辆类型，动态加载对应价格数据并渲染列表即可实现需求，下面分基础实现和进阶状态管理两种方案说明。

方案一：基础传参实现（适合小型场景） #

1. 定义核心数据结构 #

先枚举车辆类型，再封装价格项模型：

// 枚举用户车辆类型
enum UserVehicleType { sedan, suv }

// 价格项数据模型
class PriceItem {
  final String serviceName;
  final double price;
  final String description;

  PriceItem({
    required this.serviceName,
    required this.price,
    required this.description,
  });
}

2. 编写数据分发逻辑 #

根据车辆类型返回对应价格列表：

// 根据用户车辆类型生成对应价格数据
List<PriceItem> getPriceList(UserVehicleType vehicleType) {
  switch (vehicleType) {
    case UserVehicleType.sedan:
      return [
        PriceItem(
          serviceName: "基础保养",
          price: 399.0,
          description: "更换机油+机滤+常规检查",
        ),
        PriceItem(
          serviceName: "全车清洗",
          price: 129.0,
          description: "外观精洗+内饰除尘",
        ),
        PriceItem(
          serviceName: "刹车系统检修",
          price: 249.0,
          description: "刹车片磨损检测+刹车油更换",
        ),
      ];
    case UserVehicleType.suv:
      return [
        PriceItem(
          serviceName: "SUV专用基础保养",
          price: 499.0,
          description: "SUV专用机油+机滤+底盘加固检查",
        ),
        PriceItem(
          serviceName: "SUV全车深度清洗",
          price: 199.0,
          description: "外观精洗+内饰深度清洁+轮毂除锈",
        ),
        PriceItem(
          serviceName: "底盘装甲维护",
          price: 399.0,
          description: "底盘防锈层修复+悬挂螺栓紧固",
        ),
      ];
  }
}

3. 实现价格列表页面 #

接收车辆类型参数，动态渲染列表：

class PriceListPage extends StatelessWidget {
  final UserVehicleType userVehicleType;

  const PriceListPage({super.key, required this.userVehicleType});

  @override
  Widget build(BuildContext context) {
    final priceList = getPriceList(userVehicleType);

    return Scaffold(
      appBar: AppBar(title: const Text("汽车服务价格")),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: priceList.length,
        itemBuilder: (context, index) {
          final item = priceList[index];
          return Card(
            margin: const EdgeInsets.only(bottom: 12),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(item.serviceName, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                  const SizedBox(height: 8),
                  Text("¥${item.price.toStringAsFixed(2)}", style: const TextStyle(fontSize: 20, color: Colors.red, fontWeight: FontWeight.w600)),
                  const SizedBox(height: 4),
                  Text(item.description, style: const TextStyle(fontSize: 14, color: Colors.grey)),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

4. 跳转时传递参数 #

从服务板块页面跳转时，传入当前用户的车辆类型：

// 服务板块页面的跳转按钮示例
ElevatedButton(
  onPressed: () {
    // 实际场景中从用户信息缓存/接口获取车辆类型
    final currentUserType = UserVehicleType.suv;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PriceListPage(userVehicleType: currentUserType),
      ),
    );
  },
  child: const Text("查看价格列表"),
)

方案二：全局状态管理实现（适合复杂场景） #

如果用户车辆类型需要在多个页面共享，可使用Provider实现全局状态管理：

1. 添加依赖 #

在pubspec.yaml中添加Provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

2. 创建状态管理类 #

class UserProvider extends ChangeNotifier {
  UserVehicleType _vehicleType = UserVehicleType.sedan; // 默认值

  UserVehicleType get vehicleType => _vehicleType;

  // 更新用户车辆类型
  void setVehicleType(UserVehicleType type) {
    _vehicleType = type;
    notifyListeners();
  }
}

3. 注册全局状态 #

在main.dart中注册Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserProvider(),
      child: const MyApp(),
    ),
  );
}

4. 改造价格列表页面 #

直接从全局状态获取车辆类型，自动响应状态变化：

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

  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);
    final priceList = getPriceList(userProvider.vehicleType);

    // 后续列表渲染逻辑和方案一一致，此处省略
    return Scaffold(...);
  }
}

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