Flutter Matrix4 属性详细介绍及使用方法

当你在Flutter中使用矩阵变换时,Matrix4是一个非常强大的类。它可以对目标对象进行各种变换,如缩放、平移和旋转。Matrix4是一个表示4D矩阵的类,这里的4D并不是指四维空间,而是指这个矩阵有4行4列。下面是Matrix4的属性详细介绍及使用方法:

Matrix4属性详细介绍

  • storage: 一个长度为16的数组,表示矩阵的元素。这个数组是按列主序存储的,也就是说,第一列的元素存储在数组的前4个位置,第二列的元素存储在数组的第5到第8个位置,以此类推。
  • determinant: 矩阵的行列式。
  • entry(int row, int col): 返回矩阵中指定行和列的元素。
  • copyIntoArray(List<double> array, {int offset = 0}): 将矩阵的元素复制到指定的数组中。
  • copyFromArray(List<double> array, {int offset = 0}): 将指定数组中的元素复制到矩阵中。
  • copyFrom(Matrix4 other): 将另一个矩阵的元素复制到当前矩阵中。
  • setIdentity(): 将矩阵设置为单位矩阵。
  • setZero(): 将矩阵的所有元素设置为0。
  • setRotationX(double radians): 将矩阵设置为绕X轴旋转radians弧度的旋转矩阵。
  • setRotationY(double radians): 将矩阵设置为绕Y轴旋转radians弧度的旋转矩阵。
  • setRotationZ(double radians): 将矩阵设置为绕Z轴旋转radians弧度的旋转矩阵。
  • setRotation(Quaternion q): 将矩阵设置为由四元数q表示的旋转矩阵。
  • setTranslation(Vector3 translation): 将矩阵设置为平移矩阵。
  • setScale(double x, [double y, double z]): 将矩阵设置为缩放矩阵。
  • setDiagonal3(Vector3 vec): 将矩阵的对角线设置为vec。
  • setFromTranslationRotationScale(Vector3 translation, Quaternion rotation, Vector3 scale): 将矩阵设置为由平移、旋转和缩放组成的变换矩阵。
  • setFromTranslation(Vector3 translation): 将矩阵设置为由平移组成的变换矩阵。
  • setFromRotation(Quaternion rotation): 将矩阵设置为由旋转组成的变换矩阵。
  • setFromScale(Vector3 scale): 将矩阵设置为由缩放组成的变换矩阵。
  • setFromAffineTransform(Matrix4 other): 将矩阵设置为仿射变换矩阵。
  • setFromPerspective(double fovRadians, double aspectRatio, double nearZ, double farZ): 将矩阵设置为透视变换矩阵。
  • setEntry(int row, int col, double value): 设置矩阵中指定行和列的元素。
  • transpose(): 将矩阵转置。

Matrix4使用方法

以下是Matrix4的使用方法示例:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..translate(50.0, 50.0, 0.0)
        ..rotateZ(0.25 * pi),
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    );
  }
}

这个例子展示了如何使用Matrix4进行平移和旋转。在这个例子中,我们创建了一个Transform小部件,它将一个蓝色的正方形向右上方移动了50个像素,并绕Z轴旋转了45度。

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flutter中的FutureBuilder是一种异步UI构建模式,它可以帮助我们在等待异步操作完成时展示一些占位符UI,等异步操作完成后再用数据替换掉占位符UI。在封装FutureBuilder时,我们可以创建一个可重用的Widget,使得我们在多个页面或多个地方都可以调用这个Widget来展示异步数据。 下面是一个简单的FutureBuilder封装Widget的例子: ``` import 'package:flutter/material.dart'; class FutureBuilderWidget<T> extends StatelessWidget { final Future<T> future; final Widget Function(BuildContext, T) builder; final Widget Function(BuildContext, dynamic) errorBuilder; final Widget waitingWidget; const FutureBuilderWidget({ Key key, this.future, this.builder, this.errorBuilder, this.waitingWidget, }) : super(key: key); @override Widget build(BuildContext context) { return FutureBuilder<T>( future: future, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return waitingWidget ?? Center(child: CircularProgressIndicator()); } else if (snapshot.hasData) { return builder(context, snapshot.data); } else { return errorBuilder != null ? errorBuilder(context, snapshot.error) : Center(child: Text('Error: ${snapshot.error}')); } }, ); } } ``` 在这个封装Widget中,我们传入了一个future和一个builder函数,当future完成后,会把得到的数据传入builder函数中进行处理。同时,我们还可以传入一个errorBuilder和一个waitingWidget,分别用于处理异步操作出错和等待异步操作完成时的占位符UI。 下面是一个使用这个封装Widget的例子: ``` class MyHomePage extends StatelessWidget { final Future<String> futureData = Future.delayed(Duration(seconds: 2), () => "Hello, FutureBuilder!"); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FutureBuilder Example'), ), body: FutureBuilderWidget<String>( future: futureData, waitingWidget: Center(child: CircularProgressIndicator()), builder: (context, data) => Center(child: Text(data)), errorBuilder: (context, error) => Center(child: Text('Error: $error')), ), ); } } ``` 在这个例子中,我们定义了一个futureData,它会在2秒后返回一个字符串。在MyHomePage中,我们调用了FutureBuilderWidget,传入了futureData以及builder、errorBuilder和waitingWidget函数,分别定义了异步完成后的UI、异步失败后的UI和等待异步完成时的UI。运行这个例子后,我们会看到一个圆形进度条,等待2秒后,进度条消失,我们看到了异步操作完成后的字符串。如果异步操作出现了错误,我们也会看到一个错误提示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zender Han

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值