Flutter基础widgets教程-Transform篇
【摘要】
1 Transform
在绘制子widget之前应用转换的widget
2 构造函数
Transform({ Key key, @required this.transform, this.origin, this.alignment, this.transformHitTests =...
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
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/125066846
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）