Flutter RotatedBox 组件

13 min read

RotatedBox是个可以旋转其子widget的窗口小部件(widget)，不像Transform是在控件绘制前对其进行矩阵变换，RotatedBox是在控件layout的时候就对其子widget进行旋转处理，这意味着RotatedBox控件所需要的空间大小跟旋转子widget所需要的空间大小一样。

class RotatedBox extends SingleChildRenderObjectWidget {
  /// A widget that rotates its child.
  ///
  /// The [quarterTurns] argument must not be null.
  const RotatedBox({
    Key? key,
    required this.quarterTurns,
    Widget? child,
  }) : assert(quarterTurns != null),
       super(key: key, child: child);

  /// The number of clockwise quarter turns the child should be rotated.
  final int quarterTurns;

  @override
  RenderRotatedBox createRenderObject(BuildContext context) => RenderRotatedBox(quarterTurns: quarterTurns);

  @override
  void updateRenderObject(BuildContext context, RenderRotatedBox renderObject) {
    renderObject.quarterTurns = quarterTurns;
  }
}

使用

RotatedBox(
  quarterTurns: 3, // 90°的整数倍
  child: const Text('Hello World!'),
)

image-20221026154627824