flutter RotatedBox与Transform

示例：

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter/rendering.dart';

//Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
// 所以无论对子widget应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，
// 因为这些是在布局阶段就确定的。

main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Transform变换",
      home: _MyHome(),
    );
  }
}

class _MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomeState();
  }
}

class _MyHomeState extends State<_MyHome> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.blue),
          //默认原点为左上角，左移20像素，向上平移5像素
          child: Transform.translate(
            offset: Offset(-20.0, -5.0),
            child: Text("Hello world"),
          ),
        ),
        DecoratedBox(
            decoration: BoxDecoration(color: Colors.red),
            child: Transform.scale(
                scale: 0.5, //
                child: Text("Hello world"))),
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.green),
          child: Transform.rotate(
            //旋转90度
            angle: math.pi / 2,
            child: Text("Hello world"),
          ),
        ),
        //RotatedBox和Transform.rotate功能相似，它们都可以对子widget进行旋转变换，
        // 但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子widget的位置和大小。
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.yellow),
          child: RotatedBox(
            quarterTurns: 2, //旋转180度(2/4圈)
            child: Text("Hello world"),
          ),
        ),
      ],
    );
  }
}

效果图：