Flutter 基础篇(十九) —— 变换

73 阅读2分钟

上面例子中的 Matrix4 是一个 4D 矩阵,通过它可以实现各种矩阵操作。

平移


Transorm.translate 接收一个 offset 参数,可以在绘制时沿 x,y 轴对子组件平移指定距离。

class ConstrainedWidget extends StatelessWidget{

@override

Widget build(BuildContext context) {

return DecoratedBox(

decoration: BoxDecoration(color: Colors.pink),

//默认原点为左上角,左移20,上移10

child: Transform.translate(

offset: Offset(-20, -10),

child: Text('jonas'),

),

);

}

}

旋转


Transform.rotate 可以对子组件进行转换变换,示例:

class ConstrainedWidget extends StatelessWidget{

@override

Widget build(BuildContext context) {

return DecoratedBox(

decoration: BoxDecoration(color: Colors.pink),

//顺时针转90°

child: Transform.rotate(

angle: math.pi/2,

child: Text('jonas'),

),

);

}

}

注意:需要引入 import 'dart:math' as math;

缩放


Transform.scale 可以对子组件进行缩放,示例:

class ConstrainedWidget extends StatelessWidget{

@override

Widget build(BuildContext context) {

return DecoratedBox(

decoration: BoxDecoration(color: Colors.pink),

//方法1.5倍

child: Transform.scale(

scale: 1.5,

child: Text('jonas'),

),

);

}

}

注意:Transform 的变换是应用在绘制阶段的,而不是应用在布局阶段,所以无论对子组件应用何种变化,其占用空间的大小和在屏幕上的位置都是固定不变的,因为这些事在布局阶段就已经确定了。

RotatedBox


RotatedBoxTransform.rotate 在功能上是一致的,都是用于子组件的旋转效果,但是不同的是,RotatedBox 的变换是在布局阶段的,会影响在子组件的位置和大小。

class ConstrainedWidget extends StatelessWidget{

@override

Widget build(BuildContext context) {

return Row(

children: [

DecoratedBox(

decoration: BoxDecoration(color: Colors.deepOrange),

child: RotatedBox(

quarterTurns: 1,

child: Text('jonas'),

最后

我见过很多技术leader在面试的时候,遇到处于迷茫期的大龄程序员,比面试官年龄都大。这些人有一些共同特征:可能工作了7、8年,还是每天重复给业务部门写代码,工作内容的重复性比较高,没有什么技术含量的工作。问到这些人的职业规划时,他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段,一定要在业务范围内的扩张,技术广度和深度提升上有自己的计划,才有助于在职业发展上有持续的发展路径,而不至于停滞不前。

不断奔跑,你就知道学习的意义所在!

以上进阶BATJ大厂学习资料可以免费分享给大家,需要完整版的朋友,【点这里可以看到全部内容】。