Flutter Widget 之FractionallySizedBox

有时您的设计需要相对的纬度。

例如，按钮应该占应用程度宽度的70%，或者页边距占widget的10%。

FractionallySizedBox可以做到这一点。

使用FractionallySizeBox包裹您想要的子项。

给它一个高度和/或宽度系数。0.7表示可用尺寸的70%。

FractionallySizeBox(
    widthFactor: 0.7,
    child: MyButton(
        child: Text('Press HERE'),
    ),
)

您可以使用alignment控制到底小尺寸的widget应该在哪里。

Container(
    alignment: Alignment.center,
    child: FractionallySizedBox(
        widthFactor: 0.7,
        child: MyButton(
            child: Text('PRESS HERE'),
        ),
    ),
)

对于小尺寸的空白，请使用没有子项的FactionallySizeBox。

FractionallySizedBox(
    heightFactor: 0.1,
)

您可能想要包装这个FractionallySizedBox在一个Flexible widget中，以便它使用于行或列。

Flexible(
    child: FractionallySizedBox(
        heightFractor: 0.1,
    ),
)

如果想了解有关FractionallySizedBox的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址