1 Transform
在绘制子widget之前应用转换的widget
2 构造函数
Transform({ Key key, @required this.transform, this.origin, this.alignment, this.transformHitTests = true, Widget child, })
复制
3 常用属性
3.1 origin：指定子组件做平移、旋转、缩放时的中心点
origin: Offset(50, 50),
复制
3.2 alignment：对齐方式
alignment:Alignment.center,
复制
3.2.1 顶部左边
alignment:Alignment.topLeft,
复制
3.2.2 顶部中间
alignment:Alignment.topCenter,
复制
3.2.3 顶部右边
alignment:Alignment.topRight,
复制
3.2.4 中部左边
alignment:Alignment.centerLeft,
复制
3.2.5 中部中间
alignment:Alignment.center,
复制
3.2.6 中部右边
alignment:Alignment.centerRight,
复制
3.2.7 底部左边
alignment:Alignment.bottomLeft,
复制
3.2.8 底部中间
alignment:Alignment.bottomCenter,
复制
3.2.9 底部右边
alignment:Alignment.bottomRight,
复制
3.3 transformHitTests：点击区域是否也做相应的变换,为true时执行相应的变换,为false不执行
transformHitTests:true,
复制
3.4 transform：控制子组件的平移、旋转、缩放、倾斜变换
transform: Matrix4.rotationX(radian),
复制
3.4.1 旋转
transform: Matrix4.rotationX(radian), transform: Matrix4.rotationY(radian), transform: Matrix4.rotationZ(radian),
复制
3.4.2 平移
transform:Matrix4.translation(Vector3(x, y, z)), transform:Matrix4.translation(Vector3.all(val)), transform:Matrix4.translationValues(x, y, z),
复制
3.4.3 缩放
transform:Matrix4.diagonal3(Vector3(x, y, z)), transform:Matrix4.diagonal3(Vector3.all(val)), transform:Matrix4.diagonal3Values(x, y, z),
复制
3.4.4 倾斜
transform:Matrix4.skewX(alpha), transform:Matrix4.skewY(double beta), transform:Matrix4.skew(alpha, beta),
复制
3.5 child：子widget
child: Text('你好 Flutter'),
复制
4.显示效果
5.代码
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; // 字体适配 import '../../utils/app_size.dart'; class ListTransform extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text('Transform'), backgroundColor: Color(0xFFfafcff), bottom: TabBar(labelColor: Color(0xff030303), tabs: [ Tab( text: "效果", ), Tab( text: "属性", ) ]), ), body: TabBarView(children: [ Container( decoration: new BoxDecoration( color: new Color(0xffffffff), borderRadius: new BorderRadius.circular((AppSize.width(20))), ), child: ShowEffect()), Container( decoration: new BoxDecoration( color: new Color(0xffffffff), borderRadius: new BorderRadius.circular((AppSize.width(20))), ), child: ShowAttribute()), ]), ), ); } } // 效果 class ShowEffect extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Transform"), ), body: Center( child: Container( color: Colors.black, child: new Transform( alignment: Alignment.topRight, //相对于坐标系原点的对齐方式 transform: new Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度 child: new Container( padding: const EdgeInsets.all(8.0), color: Colors.deepOrange, child: const Text('转换的widget'), ), ), ), ), ), ); } } // 属性 class ShowAttribute extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: FutureBuilder( future: rootBundle.loadString('lib/markdown/transform.md'), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { return Markdown( data: snapshot.data, selectable: true, ); } else { return Center( child: Text("加载中..."), ); } }, ), ); } }
