Flutter 中用空格换行并开始对齐

Question

我有一个带有起始对齐的换行，它显示如下。

就我而言，我不希望保留您在右侧看到的可用空间。我可以通过对齐之间的空间来解决这个问题，它看起来像这样。

但在这种情况下，我不希望最后一行（有 3 个项目）以这种方式放置，如果不是按照开始对齐为我提供的方式。

Answer 1

我通过计算间距值来实现这一点：

Wrap(
  spacing: _calculateSpacing(),
  alignment: WrapAlignment.start,
  children: tiles,
);

double _calculateSpacing() {
  return _calculateSpacingWith(
    width: MediaQuery.of(context).size.width,
    tileWidth: _TileWidget.width,
    minSpacing: 4,
  );
}

double _calculateSpacingWith({
  required double width, 
  required double tileWidth,
  required double minSpacing,
}) {
  // N = tilesInRow
  // tileWidth * N + spacing * (N-1) = width
  final tilesInRow = ((width + minSpacing) / (tileWidth + minSpacing)).floor();
  if (tilesInRow <= 1) {
    return 0;
  }

  final spacing = ((width - tileWidth * tilesInRow) / (tilesInRow - 1)).floorToDouble();
  return spacing;
}

Answer 2

你可以尝试将

Wrap

包裹在

SizedBox

中：

SizedBox(
    width: double.maxFinite,
    child: Wrap(...),
),

附注 我的页面结构如下：

Expanded -> SingleChildScrollView -> Column -> Padding -> Column -> Wrap