Flutter - Сгруппированный список

Опубликовано: 15 Декабря, 2021

Пакет grouped_list во Flutter, как следует из названия, используется для создания элементов списка в разных группах. Этот пакет также предоставляет 3 специфические функции, которые перечислены ниже:

Элементы списка можно разделить на группы.
Каждой группе можно присвоить индивидуальный заголовок.
Большинство полей из ListView.builder доступно в этой библиотеке.

С помощью этого пакета можно создать сгруппированный список следующим образом:

 Синтаксис:
   GroupedListView <динамический, String> (
    элементы: _elements,
    groupBy: (element) => element ['group'],
    groupSeparatorBuilder: (String groupByValue) => Текст (groupByValue),
    itemBuilder: (контекст, динамический элемент) => Текст (элемент ['имя']),
    itemComparator: (item1, item2) => item1 ['имя']. compareTo (item2 ['имя']),
    useStickyGroupSeparators: true,
    FloatingHeader: истина,
    заказ: GroupedListOrder.ASC,
  ),

Ключевые параметры:

В приведенном ниже списке содержатся все параметры GroupedListView с их объяснением:

element: он содержит содержимое, которое должно отображаться в списке. Это обязательное поле.
groupBy: содержимое и группы отображаются с помощью этой функции. Это обязательное поле.
itemBuilder / indexedItemBuilder: работает с виджетом, который определяет содержимое приложения.
разделитель: этот виджет отделяет содержимое одной группы от другой.
order: устанавливает порядок, в котором отображается сгруппированный список.

Теперь давайте реализуем то же самое в приведенном ниже примере.

Пример:

Добавьте библиотеку grouped_list в раздел зависимостей файла pubspec.yaml, как показано ниже:

Теперь импортируйте зависимость в файл кода, используя следующую строку кода:

 import 'package: grouped_list / grouped_list.dart';

Теперь пора определить элементы списка. В этом примере мы добавим следующие элементы:

 Список _elements = [
  {'name': 'Virat Kohli', 'group': 'RCB'},
  {'name': 'Rohit Sharma', 'group': 'MI'},
  {'name': 'AB de Villiers', 'group': 'RCB'},
  {'name': 'Jasprit Bumrah', 'group': 'MI'},
  {'name': 'KL Rahul', 'group': 'KXIP'},
  {'name': 'Md. Шамми ',' группа ':' KXIP '},
];

Теперь структурируйте приложение, расширив StatelessWidget и вызывая метод GroupedListView, как показано ниже:

Дротик

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false ,
      title: 'Example' ,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text( 'GeeksForGeeks' ),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element[ 'group' ],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1[ 'name' ].compareTo(item2[ 'name' ]),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true ,
          groupSeparatorBuilder: (String value) => Padding(
              ),
            );
          },
        ),
      ),
    );
  }
 }

Теперь создайте пользовательский интерфейс для списка по своему усмотрению. Для простоты мы будем использовать ItemBuilder следующим образом:

Дротик

 itemBuilder: (c, element) {
  return Card(
    elevation: 8.0,
    margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
    child: Container(
      child: ListTile(
        contentPadding:
        EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: ImageIcon(
          NetworkImage( ' http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png ' )
        ),
        title: Text(element[ 'name' ]),
      ),
    ),
  );
 },

Полный исходный код:

Дротик

 import 'package:flutter/material.dart' ;
 import 'package:grouped_list/grouped_list.dart' ;
 void main() => runApp(MyApp());
 List _elements = [
  { 'name' : 'Virat Kohli' , 'group' : 'RCB' },
  { 'name' : 'Rohit Sharma' , 'group' : 'MI' },
  { 'name' : 'AB de Villiers' , 'group' : 'RCB' },
  { 'name' : 'Jasprit Bumrah' , 'group' : 'MI' },
  { 'name' : 'KL Rahul' , 'group' : 'KXIP' },
  { 'name' : 'Md. Shammi' , 'group' : 'KXIP' },
 ];
 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false ,
      title: 'Example' ,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text( 'GeeksForGeeks' ),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element[ 'group' ],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1[ 'name' ].compareTo(item2[ 'name' ]),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true ,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              value,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                  EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: ImageIcon(
                    NetworkImage( ' http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png ' )
                  ),
                  title: Text(element[ 'name' ]),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
 }

Выход:

Хотите более динамичную и конкурентную среду для изучения основ Android?

Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!

Android Flutter Dart

Flutter - Сгруппированный список

Ключевые параметры:

Дротик

Дротик

Дротик

РЕКОМЕНДУЕМЫЕ СТАТЬИ