Flutter 布局限制

Question

假设我想在 flutter 中实现这样的目标，我该怎么做？

注意：第一个数字 (8) 应该正好对齐在上面单词的第一个字母 (v of vacation) 下面，同样最后一个数字 (6) 应该正好对齐在上面单词的最后一个字母 (n of vacation) 下面。

到目前为止，我一直在尝试这样做，但没有成功。

Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Text("Vacation"),
        SizedBox(height: 10),
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Text("8"),
            Text("16"),
          ],
        )
      ],
    );

Answer 1

您可以在 Expanded Widget 中设置每个文本，Expanded 使每个对象尽可能多地占据 space 以便展开

Expanded Widget

Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        Expanded( child: Text("8"),),
        Expanded( child: Text("16"),),
      ],
    )

希望有用

Answer 2

用 IntrinsicWidth 包裹您的列并从 Row 中删除 mainAxisSize。