【自学Flutter】15 Transform 变换和 RotatedBox 的使用

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transform 和 RotatedBox 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Transform.rotate(
              angle: 1.57, // π/2，即90度顺时针旋转
              child: Container(
                width: 150,
                height: 150,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            RotatedBox(
              quarterTurns: 2, // 2*90度即180度逆时针旋转
              child: Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这段代码首先创建了一个HomePage无状态小部件，它包含一个Scaffold，其中的body是一个Column，包含两个子Widget：Transform.rotate和RotatedBox。Transform.rotate将一个蓝色的Container逆时针旋转90度，而RotatedBox则将一个红色的Container顺时针旋转180度。这两种方式都可以用来旋转Widget。