Flutter 矩阵转换

Flutter 矩阵转换(Transform)，Transform的主要作用是进行矩阵转换。Container中矩阵变换就使用了Transform。Transform可以对child做平移、旋转及缩放等操作。

Transform组件的主要属性如下所示：

接下来编写一个例子，例子中使容器旋转了一定的角度，并且使用的是Matrix4.rotationZ(0.3)方法进行旋转。完整的示例代码如下：

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transform矩阵转换示例'),
      ),
      body: Center(
        //父容器 作为背景
        child: Container(
          // 背景颜色
          color: Colors.grey,
          // 矩阵转换
          child: Transform(
              // 对齐方式
              alignment: Alignment.topRight,
              // 设置旋转值
              transform: Matrix4.rotationZ(0.3),
              // 被旋转容器
              child: Container(
                padding: const EdgeInsets.all(8.0),
                color: const Color(0xFFE8581C),
                child: const Text('Transform矩阵转换'),
              ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      title: 'Transform矩阵转换示例',
      home: LayoutDemo(),
    ),
  );
}

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter Table
• Flutter GridView
• Flutter ListView
• Flutter 百分比布局