Виджеты 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 опции, которые…
- GridView.count
- GridView.builder
- GridView.custom
- 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.
- scrollDirection: Axis.Vertical или Axis.Horizontal.. Изменяет направление прокрутки вверх-вниз или слева направо.
- reverse: false. Если установлено значение true, весь список будет перевернут, а позиция прокрутки начнется снизу.
- primary: false.. Определяет, связана ли основная прокрутка с родительским элементом или нет.
- физика. Он используется для определения поведения прокрутки, когда пользователь прокручивает и достигает начала или конца списка.
- shrinkWrap: false. По умолчанию это значение false. Прокручиваемый список занимает столько же места для прокрутки в направлении прокрутки, что может вызвать утечку памяти и снизить производительность приложения. Если для него установлено значение true, то прокручиваемый список будет настолько большим, насколько это позволяют его дочерние виджеты.
- padding (EdgeInsets): используется для указания пространства вокруг всего списка виджетов.
- crossAxisSpacing:, чтобы добавить пространство между дочерними элементами на его crossAxis, в основном это означает горизонтальный интервал между виджетами.
- mainAxisSpacing: для добавления промежутка между дочерними элементами на его mainAxis, в основном это означает вертикальный интервал между виджетами.
- 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:
- itemCount: количество или длина данных, которые будут отображаться.
- gridDelegate:. Этот всплывает снова и снова, я действительно чувствую, что мне не нужно повторять все, что я только что написал об этом ранее в этой статье, пожалуйста, вернитесь выше.
- 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
. Теперь это касается двух разных типов Щепок.
- SliverChildListDelegate или SliverChildListDelegate.fixed.
- 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.