У меня есть список (который из таблицы базы данных), как это: (Примечание: я уже десериализовал список)

groupNo | Sales
---------------
  1        5
  1        1  
  1        3
  2        6  
  2        9  
  2        2
  2        1  
  3        8  
  3        3  
  4        4  
  4        1  
  4        6  
  4        0  
  4        4  
  4        1  

Теперь я хочу отобразить эти данные так: введите описание изображения здесь

Каков наилучший способ отображения этого в пользовательском интерфейсе?

0
Aman Kataria 1 Июл 2019 в 11:07

2 ответа

Лучший ответ

Допустим, список называется itemList

Для начала нам нужен список по количеству групп. Так как номер группы повторяется в itemList, его использование напрямую для создания карточек для каждой группы не будет работать. Таким образом, мы можем добавить все groupNo из itemList в Set (поскольку набор удалит все повторяющиеся значения).

Сначала мы объявляем Set

Set groupSet = Set();

После этого мы создаем функцию readGroup(), которая будет объявлена в initState

readGroup() {
  setState((){  
   itemList.forEach((item){
     groupSet.add(item.groupNo);
     });
    });
   }

Теперь мы будем использовать ListView.builder для создания карточки для каждой группы. Внутри компоновщика мы будем использовать цикл for для заполнения элементов каждой группы в их соответствующих карточках.

Примечание. Мы не используем номер группы из Set, поскольку порядок элементов в Set не гарантируется. Таким образом, вместо этого мы используем index + 1.

ListView.builder(
 itemCount: groupSet.length,
 itemBuilder: (context, index) {
   return Column( children:<Widget>[
   Text("Group "+ (index + 1).toString()),
    SizedBox(height:10),
     Row(children: <Widget>[
      for(item in List) if(item.groupNo = index + 1)  
       Text(item.sales)
       ]);
      ]);
     }
   );
1
Aman Kataria 3 Июл 2019 в 14:57

(Знаю, я опоздал. Но пусть это решение обязательно поможет другим)

Это просто, потому что Flutter Pub.dev только что представил библиотеку под названием => grouped_list . Просто пройдите по этой ссылке. https://pub.dev/packages/grouped_list#-example-tab- Потому что это сделало мой день, и это тоже поможет тебе. Наслаждайтесь Flutter

0
ABHIMANGAL MS 6 Янв 2020 в 12:17