RotatedBox | Flutter

微信交流群

老孟公众号

# RotatedBox

旋转盒子

RotatedBox({
    Key key,
    @required this.quarterTurns,//旋转的次数，每次旋转的度数只能是90度的整数倍
    Widget child,
})

1
2
3
4
5

RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响子组件的位置和大小

案例

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    DecoratedBox(
      decoration: BoxDecoration(color: Colors.red),
      //将Transform.rotate换成RotatedBox  
      child: RotatedBox(
        quarterTurns: 1, //旋转90度(1/4圈)
        child: Text("Hello world"),
      ),
    ),
    Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
  ],
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

由于RotatedBox是作用于layout阶段，所以子组件会旋转90度（而不只是绘制的内容），decoration会作用到子组件所占用的实际空间上，所以最终就是上图的效果

本文由Rock提供。

RichText RotationTransition