Flutter基于ListView与ExpansionTile的可展开列表如何扩展Vehicle类实现跳转传参

改造思路 #

• 直接在原有Vehicle类定义中新增车辆生产年份（int类型）、车辆车漆颜色（Color类型）两个必填属性，同步更新构造函数
• 给展开区域的每一个子列表项绑定onTap交互逻辑，触发跳转时将当前对应车辆的年份、颜色作为参数传递到新页面
• 新增独立详情页组件，通过构造函数接收传入的参数，完成车辆信息展示

参考实现代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: vehicles.length,
        itemBuilder: (context, i) {
          return ExpansionTile(
            title: Text(
              vehicles[i].title,
              style: const TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic),
            ),
            children: <Widget>[
              Column(
                children: _buildExpandableContent(vehicles[i], context),
              ),
            ],
          );
        },
      ),
    );
  }

  List<Widget> _buildExpandableContent(Vehicle groupVehicle, BuildContext context) {
    List<Widget> columnContent = [];
    // 遍历分组下的单台车辆实体生成列表项
    for (Vehicle singleCar in groupVehicle.contents) {
      columnContent.add(
        ListTile(
          title: Text(
            singleCar.title,
            style: const TextStyle(fontSize: 18.0),
          ),
          leading: Icon(groupVehicle.icon),
          // 绑定点击跳转逻辑，传递车辆年份、颜色参数
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => VehicleDetailPage(
                  year: singleCar.productionYear,
                  carColor: singleCar.carColor,
                ),
              ),
            );
          },
        ),
      );
    }
    return columnContent;
  }
}

// 调整后的Vehicle类：新增车辆年份、颜色字段
class Vehicle {
  final String title;
  List<Vehicle> contents;
  final IconData? icon;
  // 新增字段：车辆生产年份
  final int productionYear;
  // 新增字段：车辆车漆颜色
  final Color carColor;

  Vehicle({
    required this.title,
    this.contents = const [],
    this.icon,
    this.productionYear = 0,
    this.carColor = Colors.transparent,
  });
}

// 初始化示例车辆数据
final List<Vehicle> vehicles = [
  Vehicle(
    title: 'Bike',
    icon: Icons.motorcycle,
    contents: [
      Vehicle(
        title: 'Vehicle no. 1',
        productionYear: 2020,
        carColor: Colors.red,
      ),
      Vehicle(
        title: 'Vehicle no. 2',
        productionYear: 2021,
        carColor: Colors.blue,
      ),
      Vehicle(
        title: 'Vehicle no. 7',
        productionYear: 2019,
        carColor: Colors.green,
      ),
      Vehicle(
        title: 'Vehicle no. 10',
        productionYear: 2022,
        carColor: Colors.yellow,
      ),
    ],
  ),
  Vehicle(
    title: 'Cars',
    icon: Icons.directions_car,
    contents: [
      Vehicle(
        title: 'Vehicle no. 3',
        productionYear: 2023,
        carColor: Colors.black,
      ),
      Vehicle(
        title: 'Vehicle no. 4',
        productionYear: 2022,
        carColor: Colors.white,
      ),
      Vehicle(
        title: 'Vehicle no. 6',
        productionYear: 2021,
        carColor: Colors.grey,
      ),
    ],
  ),
];

// 车辆详情页：接收传参展示信息
class VehicleDetailPage extends StatelessWidget {
  final int year;
  final Color carColor;
  const VehicleDetailPage({
    super.key,
    required this.year,
    required this.carColor,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("车辆详情")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "生产年份：$year",
              style: const TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 20),
            const Text(
              "车辆颜色：",
              style: TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 8),
            // 展示颜色色块
            Container(
              width: 100,
              height: 40,
              decoration: BoxDecoration(
                color: carColor,
                border: Border.all(),
              ),
            )
          ],
        ),
      ),
    );
  }

注意事项 #

• 分组层级的Vehicle实例不需要传入年份、颜色字段，这部分字段仅对应用户点击的单台车辆实体
• 跨页面传参直接传递基础类型和Flutter内置Color对象即可，不需要额外做序列化处理，性能损耗极低
• 后续如果需要扩展更多车辆属性，直接在Vehicle类中新增字段，在跳转时传入对应参数即可

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