Flutter Widget 之Spacer

358 阅读1分钟

行&列 Widget有其主要的专用对其方式属性,以用来均匀分配其children

Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
        MyColorBox(),
        MyColorBox(),
        MyColorBox(),
    ]
)

当中有spaceAround,

spceBetween

以及spaceEvenly

如果你想要更个性化的空间分配,可试用Spacer

只需添加Spacer实例到其他Widget之间

Row(
    children: [
        ColorBox(),
        Spacer(),
        ColorBox(),
        Spacer(),
        ColorBox(),
    ]
)

他们就会扩大并建立额外的空间

然后使用默认为1的Flex属性以定制其相对尺寸

Row(
    children: [
        ColorBox(),
        Spacer(flex: 2),
        ColorBox(),
        Spacer(),
        ColorBox(),
    ]
)

现在你可以自由地创建你想要地几何布局

Row(
    children: [
        ColorBox(),
        Spacer(),
        ColorBox(),
        Space(flex: 3),
        ColorBox(),
        Spacer(flex: 9),
        ColorBox(),
    ]
)

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

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