演示

参考

核心代码

RotatedBox
主要功能:旋转其他子Widget
在控件layout的时候就对其子widget进行旋转处理,所需要的空间大小跟旋转子widget所需要的空间大小一样

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

主要属性:
quarterTurns 旋转的角度为90的倍数,正值为顺时针,负数为逆时针

例子:

RotatedBox(
  quarterTurns: $_n,
  child: Image.asset("assets/images/flutter.png",width: 200,height: 100,)
)

一. 创建项目

flutter create example018_rotatedbox

二. AS打开

三. 添加依赖、放入资源文件

  assets:
    - assets/images/flutter.png

四. 编写代码

main.dart

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoRotatedBoxPage(title: 'RotatedBox'),
    );
  }
}
class DemoRotatedBoxPage extends StatefulWidget
{
    
    
  final String title;

  DemoRotatedBoxPage({
    
    Key key, this.title}) : super(key: key);

  @override
  _DemoRotatedBoxPage createState() {
    
    
    return _DemoRotatedBoxPage();
  }
}

class _DemoRotatedBoxPage extends State<DemoRotatedBoxPage>
{
    
    
  // _rotate()
  // {
    
    
  //   _n++;
  //   if(_n==5) _n=-4;
  //
  //   setState(() {
    
    
  //
  //   });
  // }

  _left()
  {
    
    
    _n--;
    setState(() {
    
    

    });
  }

  _right()
  {
    
    
    _n++;
    setState(() {
    
    

    });
  }

  int _n = 0;

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "旋转倍数:$_n"
            ),
            SizedBox(height: 10,),
            Container(
              width: 300,
              height: 200,
              color: Colors.lightBlueAccent,
                child:Text("""
RotatedBox(
  quarterTurns: $_n,
  child: Image.asset("assets/images/flutter.png",width: 200,height: 100,)
)
""",
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 20,color: Colors.white),
                )

            ),
            SizedBox(height: 20,),
          Center(
              child:
              Row(
                mainAxisAlignment:MainAxisAlignment.center,
                children: [
                  ElevatedButton(onPressed: _left, child: Icon(Icons.rotate_left_outlined,size: 50,)),
                  ElevatedButton(onPressed: _right, child: Icon(Icons.rotate_right_outlined,size: 50,)),
                ],
              ),
          ),
            SizedBox(height: 20,),
          RotatedBox(
                quarterTurns: _n,
                child: Image.asset("assets/images/flutter.png",width: 200,height: 100,)
            ),


          ],
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: _rotate,
      //   tooltip: '旋转',
      //   child: Icon(Icons.crop_rotate),
      // ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

}

6. 调试运行

AS中先打开Android或者iOS模拟器，点运行按钮。
或在命令行中运行:

flutter run

7. 打包web

flutter build web

源码

https://gitee.com/ruik2080/example-flutter

第018例-组件RotatedBox-(学习Flutter第6天)

演示

参考