Flutter变换Transform

最新推荐文章于 2024-07-04 18:00:59 发布

Android_小菜菜

最新推荐文章于 2024-07-04 18:00:59 发布

阅读量1.1k

点赞数

分类专栏： Flutter 文章标签： android ios flutter

本文链接：https://blog.csdn.net/xiaolaohuqwer/article/details/117665683

版权

Flutter 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作，

Container(
  margin: const EdgeInsets.fromLTRB(20, 100, 20, 20),
  color: Colors.green,
  child: Transform(
    alignment: Alignment.bottomRight, //原点
    transform: Matrix4.skewY(0.5), //沿Y轴倾斜0.5弧度
    child: Container(
      padding: const EdgeInsets.all(10),
      color: Colors.brown,
      child: Text("Flutter NB"),
    ),
  ),
  width: 100,
  height: 50,
),

如图
在这里插入图片描述

平移

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

Text("平移"),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.purple),
  child: Transform.translate(
    //原点为左上角  往右平移 50  往下平移10
    offset: Offset(50, 10),
    child: Text("谁是最可爱的人?"),
  ),
),

效果
在这里插入图片描述

旋转

Transform.rotate可以对子组件进行旋转变换，

Container(
  margin: const EdgeInsets.only(top: 50),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("旋转"),
      DecoratedBox(
        decoration: BoxDecoration(color: Colors.purple),
        child: Transform.rotate(
          angle: pi / 2,
          child: Text("是他是他就是他"),
        ),
      ),
    ],
  ),
),

在这里插入图片描述

缩放

Transform.scale可以对子组件进行缩小或放大，

Container(
  margin: const EdgeInsets.only(left: 100, top: 50),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("缩放"),
      DecoratedBox(
        decoration: BoxDecoration(color: Colors.purple),
        child: Transform.scale(
          scale: 2, //放大2倍
          child: Text("大大泡泡糖"),
        ),
      ),
    ],
  ),
),

在这里插入图片描述

Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的。

RotatedBox

RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。

Padding(
  padding: const EdgeInsets.only(top: 30),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.purple,
        ),
        child: RotatedBox(
          quarterTurns: 2,//旋转180度
          child: Text("天山鸟飞绝"),
        ),
      ),
      Text("万径人踪灭"),
    ],
  ),
),

在这里插入图片描述