Как показать данные в расширяемом списке в флаттере

Question

Я хочу отображать данные в расширяемом виде списка во флаттере ... например, мне нужен следующий список в качестве заголовка listView ... days = ['Monday', 'Tuesday', 'Среда'] ..... и при расширении на основе дня в списке 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',
),
]

Пожалуйста, дайте мне знать, если вам потребуется дополнительная информация от моего конца.

Answer 1

Сначала реорганизуйте данные, как показано ниже:

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

Таким образом, вы будете группировать автомобили по дням на карте, например organizData ["Monday"] будет содержать список из двух автомобилей. и так далее.

Теперь поместите все это в 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;
  }

Надеюсь, это поможет.

Answer 2

Вы можете использовать виджет ListView.builder () для рендеринга динамического списка c, и этот метод является эффективным.

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)
    )
  }
)

Answer 3

Вы можете достичь с помощью виджета ExptionTile.

Следующий код может помочь вам.

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