Flutter基础widgets教程-Transform篇
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("加载中..."),
);
}
},
),
);
}
}
此代码已共享到码云,已对60多种widget做演示及解释。一直更新中
https://gitee.com/nmgwap/flutter_app
本文来自「青年码农」公众号,作者:青年码农,转载请注明原文链接:https://www.cnblogs.com/nmgwap/p/16331648.html