Flutter Widget 之SizedBox

693 阅读1分钟

有时候,你确切地知道你想要什么,比如这个按钮应该是200像素宽地,不多也不少

这很简单,只需用SizedBox来封装按钮,然后以像素为单位给出宽度。

SizedBox(
    width: 200,
    child: MyButton(),
)

你还可以指定高度以控制其尺寸。

SizedBox(
    width: 200,
    height: 100,
    child: MyButton(),
)

就这样。

SizedBox是一个具有特定大小的widget,它指示其子级也具有该大小。

如果你设定SizedBox在一个方向上为无限长,它能否会变成无限长的呢?答案是,不会。它只会扩展其父级允许的范围。

SizedBox(
    width: double.infinity,
    height: 100,
    child: MyButton(),
)

如果在两个纬度中设为无限大,则子级将甜宠可用空间。

SizedBox(
    width: double.infinity,
    height: double.infinity,
    child: MyButton(),
)

这有一个方便的快捷方式:SizedBox.expand

SizedBox.edpand(
    child: MyButton(),
)

你可以在没有子级的情况下使用SizedBox,它不会赋值任何东西,但仍会占用空间。

非常适合在widget之间添加间隙。

Column(
    children: [
        MyButton(),
        SizedBox(height: 200),
        OtherButton(),
    ],
)

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

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