Flutter Widget 之AspectRatio

369 阅读1分钟

在布置你的应用时,你可能不太关心确切的尺寸

但你肯定需要知道某个特定widget的长宽比,无论尺寸如何你希望widget的宽度是这样的,

或希望它是这样的长条

或者整好这么大的正方形

Flutter通过AspecttRatio widget来解决这个问题

提供一个AspectRatio,一个子widget 就这样了

AspectRatio(
    aspectRatio: 3 / 2,
    child: MyWidget(),
)

长宽比就是小框长度和宽度之间的比率,它通常写成分数的形式,如3/2 三份的长对应两份的宽。

但是,别自欺欺人,其实和3除以2一样等于1.5,

AspectRatio(
    aspectRatio: 1.5,
    child: MyWidget(),
)

但别担心,Dart足够聪明,在编译期间已为你计算好了,所以用分数表示长宽比没关系而且易读。

AspectRatio的子widget 可以是任何widget

例如:彩色的容器图片,

或这个widget 树

还有一件事,请记住让AspectRatio widhet确定其子级的大小,如果你把AspectRatio设置像Expanded这种命令,它将被父级强制扩展

Expanded(
    child: AspectRatio(
        aspectRatio: 3 / 2,
        child: MyWidget(),
    ),
)

紧凑的widget,如Expanded不给子级任何的选择——这太苛刻了吧!

如果这发生在你身上,只需要Expanded和AspectRatio之间加个Align(对齐形式)

Expanded将对填充的区域强制对齐,但会让它的子级假设子级的比例

Expanded(
    child Align(
        alignment: Alignment.bottomCenter,
        child: AspectRatio(
            aspectRatio: 3 / 2,
            child: MyWidget(),
        ),
    )
)

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

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