《Flutter 控件大全》第九十九:Transform
程序员文章站
2022-03-11 19:13:46
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Transform可以对子组件进行变化,比如旋转、平移、缩放等。
基本用法:
return Transform(
transform: Matrix4.rotationZ(0.5),
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
);
transform
参数是变化4x4矩阵,上面的案例是绕z轴旋转弧度,效果如下:
origin
参数表示变换矩阵的坐标,默认是(0,0)即左上角,如果想围绕圆心旋转,代码如下;
Container(
color: Colors.blue,
child: Transform(
transform: Matrix4.rotationZ(0.5),
origin: Offset(50, 50),
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
)
效果如下:
Transform为方便调用构建了Transform.translate
、Transform.rotate
和Transform.scale
,用法如下:
Transform.scale(
scale: 0.5,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
)
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper