Правильный метод для установки childAspectRatio во флаттере

Question

Как правильно рассчитать childAspectRatio из SliverGridDelegateWithFixedCrossAxisCount во флаттере. Как настроить правильную высоту каждого вида, которая совместима со всеми устройствами и должна работать в альбомной и портретной ориентациях

GridView.builder(
    physics: BouncingScrollPhysics(),
    padding: const EdgeInsets.all(4.0),
    itemCount: snapshot.data.results.length,
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: itemCount,
      childAspectRatio: 0.501,
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
    ),
    itemBuilder: (BuildContext context, int index) {
      return GridTile(
          child: _buildGridItem(context, snapshot.data.results[index]));
    });

Answer 1

^{ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Это теоретическое объяснение того, как работает GridView.Предлагаемое решение не рассчитано на тяжелое содержание.Используйте теорию GridView, которую я здесь описываю, для построения желаемого макета.}

Позвольте мне начать с crossAxisCount, который должен интерпретироваться как количество столбцов в таблице.

например crossAxisCount: 3,

|  cell-1  ||  cell-2  ||  cell-3  |
------------------------------------ // new row after every 3 cells
|  cell-4  ||  cell-5  ||  cell-6  |

То, что делает флаттер с crossAxisCount: N,, - это попытка вписать точно N количество ячеек в строке.Следовательно, ширина одной отдельной ячейки будет равна ширине сетки, деленной на N.

например, crossAxisCount: 3, -> cellWidth = parentWidth / 3 _{(псевдокод)}

---

Теперь, что происходит дальше, это вычисление высоты ячейки с использованием childAspectRatio, о котором ваш первоначальный вопрос.

Например, cellWidth = parentWidth / crossAxisCount & cellHeight = cellWidth / childAspectRatio.

Таким образом, вы должны интерпретировать childAspectRatio как отношение ширины каждой отдельной клетки к ее высоте (и наоборот).

---

Полагаю, вы заметили, что GridView довольно ограничено, когда речь идет о необычно структурированнойlayout.

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

Я не знаю, какой тип макета вам нужен, но в случае очень динамичной / гибкой и в то же время легкой концепции вы можете попробовать использовать Wrap:

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  return SingleChildScrollView(
    child: Wrap(
      children: List.generate(totalItemsToDisplay, (index) {
        final cellWidth = mediaQuery.size.width / 3; // Every cell's `width` will be set to 1/3 of the screen width.
        return SizedBox(
          width: cellWidth,
          // You can either use some static number for `height`, or set ratio to cellWidth.
          // Setting `height` to `null` should work too, which would make height of a cell auto-resizable according to its content.
          height: 123,
          child: ...,
        );
      })
    )
  );
}

Однако я не рекомендовал бы использовать это для отображения больших наборов данных.

Если ваша цель - показать набор постов / статей / рисунков и т. Д., Что изначально подразумевает структурированный тяжелый контент - я бы рекомендовал использовать GridView путем стандартизации высоты ячеек.через childAspectRatio.