时间戳

首页 > 解决方案 > Flutter：listview 和 expandTile 的类

flutter - Flutter：listview 和 expandTile 的类

问题描述

我正在遵循如何在 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,
  ),
];

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

谢谢

标签： flutteruser-interfacelistviewexpandablelistview

解决方案

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

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。

有关命名参数和可选参数的更多信息，请查看 此。

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

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,
  ));

推荐阅读