Flutter：listview 和 expandTile 的类答案

【问题标题】：Flutter: Class for listview and expansionTileFlutter：listview 和 expandTile 的类
【发布时间】：2021-04-05 18:36:16
【问题描述】：

我正在遵循How to create Expandable ListView in Flutter 的建议解决方案，如下所示：

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

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

  _buildExpandableContent(Vehicle vehicle) {
    List<Widget> columnContent = [];

    for (String content in vehicle.contents)
      columnContent.add(
        new ListTile(
          title: new Text(content, style: new TextStyle(fontSize: 18.0),),
          leading: new Icon(vehicle.icon),
        ),
      );

    return columnContent;
  }
}

class Vehicle {
  final String title;
  List<String> contents = [];
  final IconData icon;

  Vehicle(this.title, this.contents, this.icon);
}

List<Vehicle> vehicles = [
  new Vehicle(
    'Bike',
    ['Vehicle no. 1', 'Vehicle no. 2', 'Vehicle no. 7', 'Vehicle no. 10'],
    Icons.motorcycle,
  ),
  new Vehicle(
    'Cars',
    ['Vehicle no. 3', 'Vehicle no. 4', 'Vehicle no. 6'],
    Icons.directions_car,
  ),
];

如何修改“class Vehicle”以添加年份和颜色等信息？年份和颜色信息将使用“onTap”在新屏幕中显示/使用

谢谢

【问题讨论】：

标签： flutter user-interface listview expandablelistview

【解决方案1】：

要为类添加年份和颜色修改您的车辆类，如下所示，

class Vehicle {
  final String title;
  List<String> contents = [];
  final IconData icon;
  int year;
  Color vehicleColor;

  Vehicle({this.title, this.contents, this.icon, this.year, this.vehicleColor});
}

最好将你的构造函数参数设为Named Parameters以避免以后混淆，或者你也可以将它们设为Positional parameters。

有关命名参数和可选参数的更多信息检查 this.

现在您可以轻松地将数据添加到您的列表中

List<Vehicle> vehicles = [
  new Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2018,
    vehicleColor: Colors.blue,
  ),
  new Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2019,
    vehicleColor: Colors.red,
  ),
];

当你想将数据添加到列表中时，只需调用这行代码，在 onTap 方法中

  vehicles.add(Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2018,
    vehicleColor: Colors.blue,
  ));

【讨论】：