Flutter基础widgets教程-Transform篇
时间:2022-07-28
本文章向大家介绍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做演示及解释。一直更新中
- job处理缓慢的性能问题排查与分析(r4笔记第18天)
- 京东商品评论情感分析:数据采集与词向量构造方法
- springboot开启access_log日志输出
- 完美的执行计划导致的性能问题(r4笔记第17天)
- 解决Docker容器时区及时间不同步的问题
- 移动端测试方案--sptt
- 服务端事件EventSource揭秘
- 让docker中的mysql启动时自动执行sql文件
- 通过执行计划中的CONCATENATION分析sql问题(r4笔记第16天)
- 《小美好》短评文本情感分析+生成词云
- 通过shell定制dbms_advisor.quick_tune(r4笔记第15天)
- 跨浏览器tab页的通信解决方案尝试
- 深度学习的GPU:深度学习中使用GPU的经验和建议
- socket.io搭配pm2(cluster)集群解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP调用QQ互联接口实现QQ登录网站功能示例
- laravel解决迁移文件一次删除创建字段报错的问题
- laravel 错误处理,接口错误返回json代码
- Thinkphp 3.2框架使用Redis的方法详解
- Laravel validate error处理,ajax,json示例
- PHP 图片合成、仿微信群头像的方法示例
- python写文件时覆盖原来的实例方法
- Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
- PHP判断当前使用的是什么浏览器(推荐)
- PHP 计算两个时间段之间交集的天数示例
- laravel model 两表联查示例
- Laravel使用模型实现like模糊查询的例子
- Laravel 模型使用软删除-左连接查询-表起别名示例
- PHP上传图片到数据库并显示的实例代码
- Laravel 5.5 实现禁用用户注册示例