Flutter Widget 之RotatedBox

989 阅读1分钟

有些设计要求旋转用户界面的一部分。

ezgif.com-gif-maker.gif

在这里,我们通过将标题旋转90度,来使应用程序更加有趣。要做到这一点,只需要使用RotatedBox,提供子部件和你希望其旋转的四分之一圈数,四分之一的圈是90度

RotatedBox(
    quarterTurns: 3,
    child: MyWidget(),
)

这个小部件将提取它的子部件,旋转它 然后在布局中使用它的旋转尺寸

ezgif.com-gif-maker (1).gif

这与Tranform.rotate形成对比

RotatedBox != Transform.rotate

例如,它只会影响渲染而不会影响布局

Translate.rotate中的布局将表现好似未旋转的子部件仍然占据着其原始位置

image.png

Transform.rotate因此对动画和轻微旋转很有用

ezgif.com-gif-maker (2).gif

但是对应像这样永久旋转的盒子,请使用RotatedBox

image.png

一如既往,你提供什么作为子部件不重要,它可以是一段文字、一些按钮或一些列芯片,只要时候小部件,Flutter都无所谓

image.png

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

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