Компоновка сетки Flutter — статьи GridView

Flutter
Компоновка сетки Flutter — статьи GridView

1. Введение

FlutterКак одна из самых популярных технологий в настоящее время, она уже привлекла внимание большого количества энтузиастов технологий, и даже некоторых闲鱼,美团,腾讯И другие крупные компании были введены в эксплуатацию. Хотя его экология еще не полностью созрела,GoogleБлаго, скорость его развития уже достаточно поразительна, можно предвидеть, что в будущемFlutterСпрос на разработчиков также будет расти.

Будь то первопроходцы текущей технологии или будущая тенденция, ей 9102 года. Именно с таким менталитетом автор и начал изучатьFlutter, и построилсклад, весь последующий код будет размещаться на нем, добро пожаловать звездочка, учитесь вместе. Это серия статей о Flutter, которую я написал:

проходить черезПредыдущийправильноListViewКомпонентное обучение, у нас есть предварительное понимание использования компонентов прокрутки, что очень важно для сегодняшнего обучения.GridViewКомпоненты очень помогают. потому что оба наследуют отBoxScrollView, так что более 80% свойств у них совпадают, и использование очень похоже.

И как показано на рисунке ниже,GridViewМакет сетки на самом деле очень часто используется в приложениях, поэтому давайте взглянем наFlutterКак это использовать~

app网格布局使用

2. Первое знакомство с GridView

Наш герой сегодняGridViewВсего имеется 5 конструкторов:GridView,GridView.builder,GridView.count,GridView.extentа такжеGridView.custom. Но не паникуйте, потому что можно сказать, что вы действительно можете освоить его конструктор по умолчанию~

посмотриGridViewКонструктор (нечастые свойства опущены):

GridView({
  Key key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required this.gridDelegate,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

Хотя атрибутов много, большинство из них знакомые, старые друзья~ за исключением одного обязательного параметраgridDelegateснаружи, общая суммаListViewПараметры конструктора по умолчанию такие же, поэтому в статье в начале написано masteredListViewучиться сноваGridViewОчень простая причина.

Тогда давайте сосредоточимся наgridDelegateЭтот параметр, на самом делеGridViewДелегат того, как компонент управляет расположением дочерних элементов. Чтобы отслеживать исходный код, мы можем найти его вscroll_view.dartвидеть в,gridDelegateТипSliverGridDelegate, следить дальшеsliver_grid.dartможно увидетьSliverGridDelegateПо сути, это абстрактный класс, и есть два класса реализации:

  • SliverGridDelegateWithFixedCrossAxisCount: для сценариев с фиксированным количеством столбцов;
  • SliverGridDelegateWithMaxCrossAxisExtent: используется в сценариях, где дочерние элементы имеют ограничение по максимальной ширине;

2.1 SliverGridDelegateWithFixedCrossAxisCount

Давайте сначала посмотримSliverGridDelegateWithFixedCrossAxisCount, по названию класса также можно примерно догадаться, для чего он используется: если ваш макет每一行的列数是固定的, то вы должны использовать его.

Взгляните на его конструктор:

SliverGridDelegateWithFixedCrossAxisCount({
  @required this.crossAxisCount,
  this.mainAxisSpacing = 0.0,
  this.crossAxisSpacing = 0.0,
  this.childAspectRatio = 1.0,
})
  • crossAxisCount: количество столбцов, то есть сколько дочерних элементов в строке;
  • mainAxisSpacing: Расстояние между зазорами в направлении главной оси;
  • crossAxisSpacing: расстояние между зазорами в направлении вторичной оси;
  • childAspectRatio: Соотношение сторон дочернего элемента.

参数含义解释

Вы должны были видеть пример изображения выше, и вы поймете значение каждого параметра за считанные секунды. Однако здесь есть на что обратить особое внимание:Если соотношение сторон вашего дочернего элемента не равно 1, вы должны установитьchildAspectRatioАтрибуты.

2.2 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtentВ практических приложениях может быть и меньше, давайте взглянем на его конструктор:

SliverGridDelegateWithMaxCrossAxisExtent({
  @required this.maxCrossAxisExtent,
  this.mainAxisSpacing = 0.0,
  this.crossAxisSpacing = 0.0,
  this.childAspectRatio = 1.0,
})

можно увидеть, кромеmaxCrossAxisExtentКроме того, другие параметры иSliverGridDelegateWithFixedCrossAxisCountвсе так же. ТакmaxCrossAxisExtentДля чего это? Давайте посмотрим на пример:

Если ширина экрана телефона375,crossAxisSpacingзначение0,

  • maxCrossAxisExtentзначение125, количество столбцов сетки будет3. потому что125 * 3 = 375, в самый раз, ширина каждого столбца375/3.
  • maxCrossAxisExtentзначение126, количество столбцов сетки будет3. потому что126 * 3 > 375, не отображается, ширина каждого столбца будет375/3.
  • maxCrossAxisExtentзначение124, количество столбцов сетки будет4. потому что124 * 3 < 375, еще есть избыток, ширина каждого столбца будет375/4.

можно увидеть,maxCrossAxisExtentНа самом деле скажиGridViewКакова максимальная ширина дочерних элементов компонента, а затем рассчитайте соответствующую ширину столбца (на самом деле мы редко используем это, поэтому этот метод используется не часто).

3. Практическое применение

После предыдущего введения имеемGrdiViewИмея предварительное представление о компонентах, давайте рассмотрим, как их использовать. помни раньшеGridViewразличные конструкторы? фактически:

  1. GridViewКонструктор по умолчанию можно сравнить сListViewКонструктор по умолчанию, подходит дляконечное число подэлементовсцена, потому чтоGridViewКомпоненты визуализируются одновременноchildrenкомпоненты дочерних элементов в ;
  2. GridView.builderКонструктор может быть аналогомListView.builderКонструктор, длядлинный переченьсцена, потому чтоGridViewКомпоненты будут динамически создаваться и уничтожаться в зависимости от появления на экране дочерних элементов, что снижает потребление памяти и повышает эффективность рендеринга;
  3. GridView.countКонструкторGrdiViewиспользоватьSliverGridDelegateWithFixedCrossAxisCountВ сокращении (синтаксический сахар) эффект точно такой же;
  4. GridView.extentСтиль конструктораGridViewиспользоватьSliverGridDelegateWithMaxCrossAxisExtentВ сокращении (синтаксический сахар) эффект точно такой же.

Давайте сначала рассмотрим простой пример, в котором используетсяGridView.countКонструктор имитирует список услуг на главной странице Meituan Takeaway (код пункта сервисного меню можно увидеть наздесь, что можно рассматривать как дальнейшее закрепление использования базовых компонентов):

код (адрес файла)

GridView.count(
  crossAxisCount: 5,
  padding: EdgeInsets.symmetric(vertical: 0),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)

/*************/
/* 完全等同于 */
/************/

GridView(
  padding: EdgeInsets.symmetric(vertical: 0),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 5,
  ),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)

предварительный просмотр

Давайте взглянем на список перекрестных разговоров в Гималаях.GridView.builderКонкретный пример создания макета сетки (код карты перекрестных помех можно найти вздесь):

код (адрес файла)

GridView.builder(
  shrinkWrap: true,
  itemCount: programmeList.length,
  physics: NeverScrollableScrollPhysics(),
  padding: EdgeInsets.symmetric(horizontal: 16),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 0.7,
  ),
  itemBuilder: (context, index) {
    return Programme(data: programmeList[index]);
  },
)

предварительный просмотр

4. Резюме

Эта статья впервые знакомитGridViewЗначение атрибутов компонента, и акцент делается на объясненииSliverGridDelegateWithFixedCrossAxisCountа такжеSliverGridDelegateWithMaxCrossAxisExtentПрименимые сценарии применения. Затем, через два примера практического применения, представленныхGridViewЧасто используемые конструкторы для компонентов. Я надеюсь, что благодаря введению в эту статью вы сможете освоитьFlutterИспользование макета сетки~

Весь код в этой статье размещен по адресуздесь, вы также можете подписаться на мойBlog, добро пожаловать, чтобы обменяться и учиться вместе~

Категории