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

15 Transform 变换和 RotatedBox 的使用

1.源代码

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

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    DecoratedBox(
                      decoration: BoxDecoration(color: Colors.lightBlue),
                      child: Transform(
                        alignment: Alignment.topRight,
                        transform: Matrix4.skewY(0.3),
                        child: DecoratedBox(
                          decoration: BoxDecoration(color: Colors.orange),
                          child: Text("Transform"),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 20.0
                      ),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                            color: Colors.red
                        ),
                        child: Transform.translate(
                          offset: Offset(-10,-10),
                          child: Text("Translate"),
                        ),
                      ),),
                    Padding(
                        padding: EdgeInsets.only(
                            top: 20.0
                        ),
                        child: Row(
                          children: <Widget>[
                            Transform.rotate(
                              angle: math.pi/2,
                              child:  DecoratedBox(
                                decoration: BoxDecoration(
                                    color: Colors.yellow
                                ),
                                child:
                                Text("rotate"),
                              ),
                            ),
                            Text("演示用")
                          ],
                        )
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 20.0
                      ),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                            color: Colors.red
                        ),
                        child: Transform.scale(
                          scale: 1.5,
                          child: Text("scale"),
                        ),
                      ),
                    ),
                    Row(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(
                              top: 20.0
                          ),
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                                color: Colors.red
                            ),
                            child: RotatedBox(
                              quarterTurns: 1,
                              child: Text("RotatedBox"),
                            ),
                          ),
                        ),
                        Text("演示用")
                      ],
                    )
                  ],
                )
            )

        )
    );
  }
}

2.解释源代码

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

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    DecoratedBox(
                      decoration: BoxDecoration(color: Colors.lightBlue),
                      //Transform 使用
                      child: Transform(
                        //相对于坐标系原点的对齐方式
                        alignment: Alignment.topRight,
                        //沿Y轴倾斜0.3弧度
                        transform: Matrix4.skewY(0.3),
                        child: DecoratedBox(
                          decoration: BoxDecoration(color: Colors.orange),
                          child: Text("Transform"),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 20.0
                      ),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                            color: Colors.red
                        ),
                        //默认原点为左上角，左移10像素，向上平移10像素
                        child: Transform.translate(
                          offset: Offset(-10,-10),
                          child: Text("Translate"),
                        ),
                      ),),
                    Padding(
                        padding: EdgeInsets.only(
                            top: 20.0
                        ),
                        child: Row(
                          children: <Widget>[
                            //import 'dart:math' as math;  先导包，再使用math
                            Transform.rotate(
                              //旋转90度
                              angle: math.pi/2,
                              child:  DecoratedBox(
                                decoration: BoxDecoration(
                                    color: Colors.yellow
                                ),
                                child:
                                Text("rotate"),
                              ),
                            ),
                            Text("演示用")
                          ],
                        )
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 20.0
                      ),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                            color: Colors.red
                        ),
                        //放大1.5倍
                        child: Transform.scale(
                          scale: 1.5,
                          child: Text("scale"),
                        ),
                      ),
                    ),
                    Row(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(
                              top: 20.0
                          ),
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                                color: Colors.red
                            ),
                            //和Transform.rotate功能相似，但有不同，具体看效果图演示用的文字距离
                            child: RotatedBox(
                              //旋转90度(1/4圈)
                              quarterTurns: 1,
                              child: Text("RotatedBox"),
                            ),
                          ),
                        ),
                        Text("演示用")
                      ],
                    )
                  ],
                )
            )

        )
    );
  }
}

3.效果图