Created
July 3, 2019 08:18
-
-
Save chunhunghan/577108b90a906507ed7a8505b76d2cb0 to your computer and use it in GitHub Desktop.
flutter RotatedBox and Transform https://blog.csdn.net/sinat_31057219/article/details/90295125
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"), | |
| ), | |
| ), | |
| ], | |
| ); | |
| } | |
| } | |
| --------------------- | |
| 作者：Mars-xq | |
| 来源：CSDN | |
| 原文：https://blog.csdn.net/sinat_31057219/article/details/90295125 | |
| 版权声明：本文为博主原创文章，转载请附上博文链接！ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment