Виджеты Flutter (вид в виде сетки) Изображение целиком

Я хотел бы воспользоваться этой возможностью, чтобы поблагодарить Сообщество Flutter за добавление меня в качестве автора их публикации, я разместил свою последнюю статью о TabBar & TabBarView в разделе публикации сообщества Flutter, и я получил гораздо больше внимания к этой статье, чем предыдущие, которые я разместил ранее. Теперь я чувствую, что следующим шагом будет то, что мы, индийские писатели, скоро сможем присоединиться к программе Medium Partner. За последние несколько дней я много читал об этом, что Medium использует Stripe в качестве метода оплаты, а Stripe теперь доступен в Индии, но все же, по какой-то причине Партнерская программа не открылась для индийских писателей, надеюсь, что это произойдет в ближайшее время.

Что такое сетка?

Это двухмерный массив, который размещает свои дочерние элементы в строках и столбцах, отображая элементы в табличной форме. Как следует из названия, это Grid, очень похожий на то, что мы видим в программировании Android или любом другом языке программирования. Лучшее место, чтобы увидеть пример Grid View - это Google Play Store или Apple App Store, где мы можем увидеть список приложений в виде вертикальной и горизонтальной прокрутки. Точно так же, если вы видите какое-либо приложение из торговой площадки, такое как Amazon или Flipkart, вы увидите формат Grid View.

Поскольку вид сетки является отдельным виджетом, есть еще 4 опции, которые…

  1. GridView.count
  2. GridView.builder
  3. GridView.custom
  4. GridView.extent

Давайте сначала рассмотрим виджет GridView как можно более подробно, тогда будет легче понять остальные 4 варианта, потому что там, где почти все свойства остаются такими же, только требуемое свойство отличается каждый.

Виджет просмотра сетки

Конструктор GridView выглядит следующим образом…

GridView(
  scrollDirection: Axis.vertical,           //default
  reverse: false,                           //default
  controller: ScrollController(),
  primary: false,
  physics: ,
  shrinkWrap: true,
  padding: EdgeInsets.all(5.0),
  @required
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5.0,
    crossAxisSpacing: 5.0,
  ),        OR
  /* gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 125,
      mainAxisSpacing: 5.0,
      crossAxisSpacing: 5.0),*/
  addAutomaticKeepAlives: true,             //default
  addRepaintBoundaries: true,               //default
  addSemanticIndexes: true,                 //default
  semanticChildCount: 0,
  cacheExtent: 0.0,
  dragStartBehavior: DragStartBehavior.start,
  clipBehavior: Clip.hardEdge,
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,      
  children: []                     // List of Widgets
),

Следующие свойства важно понимать при реализации GridView.

  1. scrollDirection: Axis.Vertical или Axis.Horizontal.. Изменяет направление прокрутки вверх-вниз или слева направо.
  2. reverse: false. Если установлено значение true, весь список будет перевернут, а позиция прокрутки начнется снизу.
  3. primary: false.. Определяет, связана ли основная прокрутка с родительским элементом или нет.
  4. физика. Он используется для определения поведения прокрутки, когда пользователь прокручивает и достигает начала или конца списка.
  5. shrinkWrap: false. По умолчанию это значение false. Прокручиваемый список занимает столько же места для прокрутки в направлении прокрутки, что может вызвать утечку памяти и снизить производительность приложения. Если для него установлено значение true, то прокручиваемый список будет настолько большим, насколько это позволяют его дочерние виджеты.
  6. padding (EdgeInsets): используется для указания пространства вокруг всего списка виджетов.
  7. crossAxisSpacing:, чтобы добавить пространство между дочерними элементами на его crossAxis, в основном это означает горизонтальный интервал между виджетами.
  8. mainAxisSpacing: для добавления промежутка между дочерними элементами на его mainAxis, в основном это означает вертикальный интервал между виджетами.
  9. gridDelegate: это обязательное свойство для виджета GridView. Я уже упоминал в конструкторе выше два виджета, которые связаны со свойством gridDelegate. Основное различие между ними: SliverGridDelegateWithFixedCrossAxis имеет свойство crossAxisCount, которое принимает число, в соответствии с которым GridView будет отображать количество столбцов. Если он равен 2, он покажет 2 столбца, если он равен 4, он покажет 4 столбца. Теперь у SliverGridDelegateWithMaxCrossAxisExtent есть свойство maxCrossAxisExtent, которое принимает двойные пиксели. На самом деле это означает, что он разделяет доступное пространство между виджетами и соответственно формирует столбцы. Например, если ширина экрана составляет 500 пикселей, а для maxCrossAxisExtent установлено значение 150 пикселей, каждый дочерний виджет получит максимум 150 пикселей или меньше, и поэтому делегат нарисует 4 столбца, предоставляя каждому дочернему элементу 125 пикселей пространства.

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
  mainAxisSpacing: 5.0,
  crossAxisSpacing: 5.0,
),

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200,
    mainAxisSpacing: 5.0,
    crossAxisSpacing: 5.0),

10. keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.Manual. Пользователь должен будет вручную скрыть или закрыть клавиатуру, и если он установлен на onDrag, как только пользователь начнет прокрутку, клавиатура будет закрыта автоматически.

GridView.count и GridView.extent

Причина объединения этих двух типов GridView заключается в том, что они оба являются ветвью gridDelegate , о которой я говорил ранее.

Позвольте мне объяснить…

GridView.count имеет обязательное свойство, известное как crossAxisCount, звучит знакомо… в GridView обязательное свойство gridDelegate принимает значение SliverGridDelegateWithFixedCrossAxis с тем же свойством, что и crossAxisCount. Поэтому вместо реализации этой дополнительной части сложного кода вы можете напрямую использовать GridView.count, который, по-видимому, является наиболее часто используемым и настоятельно рекомендуется самим flutter. Для справки ознакомьтесь с приведенным ниже кодом и изображением.

GridView.count(
  crossAxisCount: 3,              @required
  crossAxisSpacing: 5,
  mainAxisSpacing: 5,
  padding: EdgeInsets.all(10.0),
  children: List.generate(
    options.length,
    (index) => GridOptions(
      layout: options[index],
    ),
  ),
),

GridView.extent имеет обязательное свойство, известное как maxCrossAxisExtent, которое похоже на SliverGridDelegateWithMaxCrossAxisExtent, для которого я уже подробно объяснил, как оно работает, см. назад к gridDelegate. Для справки и понимания, пожалуйста, посмотрите код ниже.

GridView.extent(
  crossAxisSpacing: 5,
  mainAxisSpacing: 5,
  padding: EdgeInsets.all(10.0),
  maxCrossAxisExtent: 200,           @required
  children: List.generate(
    options.length,
    (index) => GridOptions(
      layout: options[index],
    ),
  ),
),

Изображения могут выглядеть очень похожими во всей статье, я просто случайным образом выбрал цвета и использовал значки и текст для создания сетки. Таким образом, это либо сетка из 2 столбцов, либо сетка из 3 столбцов. Теперь перейдем к 3-му представлению сетки, которое…

GridView.builder

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

Три важных свойства GridView.builder:

  1. itemCount: количество или длина данных, которые будут отображаться.
  2. gridDelegate:. Этот всплывает снова и снова, я действительно чувствую, что мне не нужно повторять все, что я только что написал об этом ранее в этой статье, пожалуйста, вернитесь выше.
  3. itemBuilder (контекст BuildContext, int index):. Если вы создали представление списка в любом приложении, оно очень похоже, оно используется для создания элементов в сетке. Давайте посмотрим на пример, чтобы понять это.
GridView.builder(
  shrinkWrap: true,
  itemCount: options.length,
  itemBuilder: (BuildContext context, int index) =>
      GridOptions(layout: options[index]),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5.0,
    crossAxisSpacing: 5.0,
  ),
),

GridView.custom

Последний - GridView.custom, ну, само название говорит о том, что вы создаете свой собственный GridView. Все остальные свойства остаются прежними, и при использовании GridView.custom необходимо определить только два обязательных свойства: gridDelegate и childDelegate. Опять же, я не буду переписывать gridDelegate, поскольку все осталось так же, как и раньше. Новый, который нам нужно обсудить, - это childDelegate. Теперь это касается двух разных типов Щепок.

  1. SliverChildListDelegate или SliverChildListDelegate.fixed.
  2. SliverChildBuilderDelegate.

Оба являются просто еще одним способом указать данные или длину данных, которые будут отображаться в GridView. SliverChildListDelegate принимает список дочерних элементов, или вы можете указать фиксированное количество дочерних элементов. SliverChildBuilderDelegate принимает itemBuilder и index, как мы уже обсуждали GridView.builder. Глядя на код для обоих выше, вы лучше поймете, как это работает.

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5.0,
    crossAxisSpacing: 5.0,
  ),
  childrenDelegate: SliverChildListDelegate(_buildItems(20)),
),
---------------------------------------
List _buildItems(int count) {
  List<Widget> listItems = List();

  for (int i = 0; i < count; i++) {
    listItems.add(
      Card(
        color: RandomColor().getColor(),
        elevation: 5.0,
        child: Center(
          child: Text(
            'Grid Item ${i.toString()}',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22.0),
          ),
        ),
      ),
    );
  }
  return listItems;
}
--------------------------------------
class RandomColor {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(255), random.nextInt(255),
        random.nextInt(255), random.nextInt(255));
  }
}

Вышеупомянутое приведет к изображению, приведенному ниже.

А теперь давайте посмотрим на код с SliverChildBuilderDelegate вместе с его изображением.

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5.0,
    crossAxisSpacing: 5.0,
  ),
  childrenDelegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) => GridOptions(
            layout: options[index],
          ),),
),

Я публикую оставшуюся часть кода, который я написал для этой статьи, для всех, кто хочет поэкспериментировать и извлечь из него уроки. Если я что-то пропустил, напишите по адресу, и я буду рад добавить это в сообщение.

class GridLayout {
  final String title;
  final IconData icon;

  GridLayout({this.title, this.icon});
}
List<GridLayout> options = [
  GridLayout(title: 'Home', icon: Icons.home),
  GridLayout(title: 'Email', icon: Icons.email),
  GridLayout(title: 'Alarm', icon: Icons.access_alarm),
  GridLayout(title: 'Wallet', icon: Icons.account_balance_wallet),
  GridLayout(title: 'Backup', icon: Icons.backup),
  GridLayout(title: 'Book', icon: Icons.book),
  GridLayout(title: 'Camera', icon: Icons.camera_alt_rounded),
  GridLayout(title: 'Person', icon: Icons.person),
  GridLayout(title: 'Print', icon: Icons.print),
  GridLayout(title: 'Phone', icon: Icons.phone),
  GridLayout(title: 'Notes', icon: Icons.speaker_notes),
  GridLayout(title: 'Music', icon: Icons.music_note_rounded),
  GridLayout(title: 'Car', icon: Icons.directions_car),
  GridLayout(title: 'Bicycle', icon: Icons.directions_bike),
  GridLayout(title: 'Boat', icon: Icons.directions_boat),
  GridLayout(title: 'Bus', icon: Icons.directions_bus),
  GridLayout(title: 'Train', icon: Icons.directions_railway),
  GridLayout(title: 'Walk', icon: Icons.directions_walk),
  GridLayout(title: 'Contact', icon: Icons.contact_mail),
  GridLayout(title: 'Duo', icon: Icons.duo),
  GridLayout(title: 'Hour', icon: Icons.hourglass_bottom),
  GridLayout(title: 'Mobile', icon: Icons.mobile_friendly),
  GridLayout(title: 'Message', icon: Icons.message),
  GridLayout(title: 'Key', icon: Icons.vpn_key),
  GridLayout(title: 'Wifi', icon: Icons.wifi),
  GridLayout(title: 'Bluetooth', icon: Icons.bluetooth),
  GridLayout(title: 'Smile', icon: Icons.sentiment_satisfied),
  GridLayout(title: 'QR', icon: Icons.qr_code),
  GridLayout(title: 'ADD', icon: Icons.add_box),
  GridLayout(title: 'Link', icon: Icons.link),
];
class GridOptions extends StatelessWidget {
  final GridLayout layout;
  GridOptions({this.layout});
  @override
  Widget build(BuildContext context) {
    return Card(
      color: RandomColor().getColor(),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(
              layout.icon,
              size: 40,
            ),
            Text(
              layout.title,
              style: TextStyle(
                fontSize: 24,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Я подошел к концу своей статьи, надеясь охватить все это, потому что, как говорится в моем заголовке, и я упомянул это в своей самой первой статье, я пытаюсь собрать все это воедино, исследуя, экспериментируя и пишу настолько подробно, насколько возможно, чтобы новичкам вроде меня не приходилось искать в Google каждую небольшую часть информации о виджетах Flutter. Надеюсь, вы, читатели, узнали из нее что-то новое, и если вы узнали, пожалуйста, похлопайте мне в ладоши в знак поддержки и поделитесь этой статьей со своими друзьями и семьей.

оставляя ссылки ниже, чтобы вы могли общаться со мной в социальных сетях, а также ссылки на мои предыдущие истории, которые я публиковал на Medium.

Ссылки на другие мои истории Виджет SafeArea, Расширенный и гибкий, Виджет контейнера, Строка и столбец, Сгруппировать и расположить, Ящики Часть-1, Ящики Часть-2, TabBar & TabBarView.

Вы можете подписаться на меня… в Instagram, Twitter, Linkedin, Reddit.

Вы всегда можете поддержать меня, купив мне Чашку кофе ☕️.