如何在颤动的可扩展列表视图中显示数据答案

【问题标题】：How to show data in an expandable listView in flutter如何在颤动的可扩展列表视图中显示数据
【发布时间】：2020-04-12 08:24:36
【问题描述】：

我想在颤动的可扩展列表视图中显示数据... 例如，我需要下面的列表作为列表视图的标题... days = ['Monday','Tuesday','Wednesday']..... 并根据 days 列表中的日期进行扩展 ....以下数据填充同一天。

List<Cars> dummyData = [
Cars(
model: 'Fiat',
speed: '100',
day: 'Monday',
),
Cars(
model: 'Maruti',
speed: '120',
day: 'Monday',
),
Cars(
model: 'Hyundai',
speed: '130',
day: 'Tuesday',
),
Cars(
model: 'Toyota',
speed: '140',
day: 'Wednesday',
),
]

如果您需要我提供的任何其他信息，请告诉我。

【问题讨论】：

您需要合并同一天的多个条目，例如星期一有两辆车，所以您想将这两辆车放在一个标题下吗？所以你需要重新格式化列表？
是的，我想将汽车放在各自的标题中（周一，周二，周三） ...周一下有 2 辆车 ...周二下有 1 辆车，周三下有 1 辆车，我需要显示列表视图中的汽车及其速度...您能帮我解决这个问题吗
我发布了一个建议的答案，希望对您有所帮助。例如，您基本上必须重新组织列表并将其放入地图中，然后将其渲染，将汽车放置在各自的标题中

标签： flutter flutter-layout

【解决方案1】：

您可以使用 expantionTile 小部件来实现。

以下代码可能会对您有所帮助。

class DeleteWidget extends StatefulWidget {
  const DeleteWidget({Key key}) : super(key: key);

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

class _DeleteWidgetState extends State<DeleteWidget> {
  List<String> _days = ['sunday', 'Monday', 'Tuesday'];
  List<Cars> dummyData = [
    Cars(
      model: 'Fiat',
      speed: '100',
      day: 'Monday',
    ),
    Cars(
      model: 'Maruti',
      speed: '120',
      day: 'Monday',
    ),
    Cars(
      model: 'Hyundai',
      speed: '130',
      day: 'Tuesday',
    ),
    Cars(
      model: 'Toyota',
      speed: '140',
      day: 'Wednesday',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: _days.length,
          itemBuilder: (_, index) {
            return ExpansionTile(
                title: Text(_days[index].toString()),
                children: [
                  ...dummyData.map((e) {
                    if (e.day == _days[index]) {
                      return Text(e.speed.toString());
                    }
                    return Container();
                  }).toList(),
                ]);
          },
        ),
      ),
    );
  }
}

class Cars {
  String model;
  String speed;
  String day;
  Cars({this.model, this.day, this.speed});
}

【讨论】：

嗨 Viren 非常感谢您的帮助...我已经尝试了代码，它运行良好
很高兴听到它对您有所帮助。快乐编码。
非常感谢 Viren

【解决方案2】：

首先像下面这样重新组织数据：

final organizedData = new HashMap<String, List<Car>>();
for(final car in dummyData){
    if(!organizedData[car.day]){
        organizedData[car.day] = new List<Car>();
        organizedData[car.day].add(car);
    }else{
        organizedData[car.day].add(car);
    }
}

通过这样做，您将在地图中按每天对汽车进行分组，例如，organizedData["Monday"] 将包含两辆汽车的列表，依此类推。

现在将所有内容放在带有 expandable 小部件的 ListView 中，可能是这样的：

  Widget expandableList() {
    return ListView.builder(
      itemCount: organizedData.length,
      itemBuilder: (context, index) {
        String day = organizedData.keys.elementAt(index);
        return Card(
          child: ExpandablePanel(
            header: day,
            collapsed: Text('some text', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
            expanded: Card(
              child: Row(
              children: carsUI(organizedData[day]),
              ),
            tapHeaderToExpand: true,
            hasIcon: true,
          ),
        );
      },
    );
  }

  List<Widget> carsUI(List<Car> cars){
    final ui = cars.map((car){
      return Text(car.speed + ", " + car.model);
    }).toList();
    return ui;
  }

希望对你有帮助。

【讨论】：

【解决方案3】：

您可以使用 ListView.builder() 小部件来呈现动态列表，此方法是一种有效的方法。

ListView.builder(
  itemCount: dummyData.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Column(
        children: <Widget>[
          Text(dummyData[index].model),
          Text(dummyData[index].day),
        ]
      ),
      trailing: Text(dummyData[index].speed)
    )
  }
)

【讨论】：