在 Flutter 中为列和行分配权重答案

【问题标题】：Assigning weights to Columns and Rows in Flutter在 Flutter 中为列和行分配权重
【发布时间】：2018-06-22 06:13:26
【问题描述】：

我想为 Flutter App 中的所有行提供相等的间距。是否有任何可以使用的重量或任何此类小部件。例如，我的应用中有 2 个 Row 元素。我希望两个元素都占据屏幕的相等/一半宽度。

【问题讨论】：

我觉得 AspectRatio 类很有用docs.flutter.io/flutter/widgets/AspectRatio-class.html

标签： flutter flutter-layout

【解决方案1】：

在Flex（即Row 或Column）内部，Expanded 会占用剩余的可用空间。如果您将两个 Expanded 放在同一个 Flex 中，它们会平均共享剩余的可用空间（默认情况下）。

您使用它们的 flex 参数为 Expanded 分配“权重”，这将允许您让它们共享剩余空间 60/40，而不是 50/50，等等。

【讨论】：

【解决方案2】：

灵活是你的朋友

行示例：

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Flexible(
        flex: 5,
        child: SomeFirstWidget(),
      ),
      Flexible(
        flex: 2,
        child: SomeSecondWidget(),
    ],
)

flex 参数是重量。

【讨论】：

【解决方案3】：

虽然您可以使用 AspectRatio 类来均匀地管理小部件，但将小部件均匀地排列成一排更符合您的需求。行和列都有一个 mainAxisAlignment 和 crossAxisAlignment 类。

只需将您想要均匀间隔的小部件包装在一个 Column 中并设置它：

Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly ... )

你也可以像给定的here一样使用spaceBetween和spaceAround。

【讨论】：