Flutter中Transform组件的使用秘籍

导读Transform 是 Flutter 中一个强大的布局/渲染组件,允许你对其子 Widget 进行位移(translate)旋转(rotate)缩放(scale)倾斜(skew)等各种二维或三维变换操作。本文将从最基础的 API 用法讲起,结合代码示例ASCII 图解原理解析,帮助你掌握 Transform 的常见用法与进阶技巧,让你能轻松实现各种炫酷变换效果。

目录

  1. 什么是 Transform?核心概念回顾
  2. 常用构造函数与参数详解

    • 2.1 Transform.translate
    • 2.2 Transform.rotate
    • 2.3 Transform.scale
    • 2.4 Transform.skew
    • 2.5 通用 Transform + Matrix4
  3. 坐标系与原点(origin)与对齐(alignment)

    • 3.1 默认原点与对齐方式
    • 3.2 修改 origin 实现“绕任意点旋转”
    • 3.3 alignment 对齐对变换的影响
  4. 代码示例与图解

    • 4.1 位移示例:平移一个方块
    • 4.2 旋转示例:绕中心 vs 绕自定义原点
    • 4.3 缩放示例:从中心/某端开始放大
    • 4.4 倾斜示例:X 轴与 Y 轴倾斜
    • 4.5 综合示例:组合变换(先旋转再缩放)
  5. 进阶:使用 Matrix4 实现三维变换

    • 5.1 什么是 Matrix4?基础概念
    • 5.2 绕 X/Y/Z 轴旋转
    • 5.3 视距(perspective)效果
    • 5.4 实战示例:3D 翻转卡片
  6. 性能与注意事项

    • 6.1 对齐方式与布局步奏
    • 6.2 避免无意义的多层嵌套
    • 6.3 对动画和手势的影响
  7. 总结

一、什么是 Transform?核心概念回顾

  • 在 Flutter 中,布局流程大致分为“父传约束 → 子测量 → 父定位”三步。普通 Widgets(如 ContainerSizedBox)会在第一步就决定 要占据的大小,然后由父组件将它放置于某个坐标;
  • Transform 不同于常规的“盒模型”组件,它不会改变子 Widget 在布局阶段的大小与位置(也就是说,Transform 子树的尺寸在布局时保持不变),而是在绘制阶段对 Canvas 进行一次或多次矩阵变换,实现视觉上的“位移/旋转/缩放/倾斜”。
  • 换句话说,Transform

    1. 不影响子 Widget 的布局尺寸计算(其占位区域不变);
    2. 仅在 绘制(paint) 时对 Canvas 进行仿射或三维变换。

因此,使用 Transform 可以做到“不改变力布局而改变最终视觉效果”,可用来做各种过渡特效、动画效果、3D 交互等。


二、常用构造函数与参数详解

Flutter 内置了若干“快捷”构造方法,让我们无需手动构造 Matrix4 也能快速使用常见的二维变换:

2.1 Transform.translate

Transform.translate({
  Key? key,
  required Offset offset,
  Widget? child,
  // 可选:
  Clip clipBehavior = Clip.none,
})
  • 作用:将子 Widget 在绘制时沿 X、Y 方向平移指定偏移量。
  • 参数

    • offset:一个 Offset(dx, dy)dx > 0 向右,dx < 0 向左;dy > 0 向下,dy < 0 向上。
    • clipBehavior:如果子 Widget 超出父 Canvas 区域,是否要进行裁切。

示例Transform.translate(offset: Offset(20, 50), child: MyBox());

  • 表示在绘制 MyBox() 时先对 Canvas 做一次平移 (20,50),然后再绘制 MyBox,最后还原 Canvas。

2.2 Transform.rotate

Transform.rotate({
  Key? key,
  required double angle,        // 弧度
  Offset? origin,               // 旋转原点(相对于子 Widget 左上角)
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})
  • 作用:将子 Widget 在绘制时绕着某个点旋转,旋转角度为 angle(以弧度为单位)。
  • 参数

    • angle:默认以顺时针方向为正,单位是弧度(常用 math.pi / 4 等);
    • origin:可选,用于指定相对于子 Widget 左上角的原点 (x,y),只有当同时未指定 alignment 时会生效;
    • alignment:可选,用于指定“旋转原点”对应子 Widget 的对齐方式(默认 Alignment.center,即绕子 Widget 的中心旋转)。

注意originalignment 不能同时生效。

  • 如果你希望“绕子控件左上角(0,0)旋转”,可以设置 alignment: Alignment.topLeft,也可以设置 origin: Offset(0,0)
  • 如果你希望“绕子控件左下角旋转”,则:

    • alignment: Alignment.bottomLeft,或
    • origin: Offset(0, childHeight)

2.3 Transform.scale

Transform.scale({
  Key? key,
  required double scale,        // 缩放倍数,1.0 表示原始大小
  Offset? origin,
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})
  • 作用:将子 Widget 在绘制时做等比缩放,水平和垂直方向同时按 scale 值进行缩放。
  • 参数

    • scale:缩放倍率,scale > 1 放大,0 < scale < 1 缩小,负数则会翻转并缩放。
    • originalignment:与 rotate 中相同,用于指定缩放中心。

2.4 Transform.skew

Transform.skew({
  Key? key,
  required double skewX,         // X 轴倾斜角度:正值 → 右下倾斜
  required double skewY,         // Y 轴倾斜角度:正值 → 右下倾斜
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})
  • 作用:在绘制时对 Canvas 做一次**倾斜(shear)**变换:

    • skewX:沿 X 轴对 Y 坐标进行倾斜,即在 Y 轴上下移动时,让 X 坐标线性变化。
    • skewY:沿 Y 轴对 X 坐标进行倾斜,即在 X 轴左右移动时,让 Y 坐标线性变化。
  • 直观来说,倾斜效果会让矩形看起来像“平行四边形”。
  • 同样支持 alignment 来指定基于哪个对齐点进行倾斜(通常使用 Alignment.center 居中倾斜)。

2.5 通用 Transform + Matrix4

如果需要做“组合变换”(先平移、再旋转、再缩放等多步叠加),或做三维变换,就要直接使用最底层的:

Transform({
  Key? key,
  required Matrix4 transform,
  Alignment alignment = Alignment.center,
  Offset? origin,
  Widget? child,
  Clip clipBehavior = Clip.none,
})
  • Matrix4:一个 4×4 的矩阵,用于描述OpenGL风格的仿射 & 透视 & 三维变换。通过 Matrix4.translationValues(dx,dy,dz)Matrix4.rotationZ(angle)Matrix4.diagonal3Values(sx,sy,sz) 等静态方法或实例方法 (..translate() ..rotateZ() ..scale()) 可以灵活组合。
  • 常见三维 API

    • matrix.setEntry(3, 2, 0.001):设置透视投影的“视距”参数,让 Z 方向的物体看起来有透视感。
    • Matrix4.rotationX(theta)Matrix4.rotationY(theta)Matrix4.rotationZ(theta):分别绕三个轴旋转。

三、坐标系与原点(origin)与对齐(alignment)

正确理解“原点(origin)”与“对齐(alignment)”对 Transform 行为至关重要。

3.1 默认原点与对齐方式

  • 默认 alignment = Alignment.center:表示在绘制时,先将子 Widget 的坐标系原点移到其“中心点”,再进行变换,最后将变换后的坐标系复位。

    • 换句话说:Align 相当于对 Canvas 做两次平移:

      1. translate(centerX, centerY)
      2. apply transform…
      3. translate(-centerX, -centerY)
  • 如果不指定 origin,且默认 alignment,那么变换的“锚点”就是子 Widget 的中心 (width/2, height/2)

3.2 修改 origin 实现“绕任意点旋转”

  • originOffset(dx, dy),表示相对于子 Widget 左上角的变换起点。

    • 如果 origin: Offset(0,0),则绕子 Widget 左上角旋转或缩放;
    • 如果想绕“子 Widget 右下角”旋转:必须指定origin: Offset(childWidth, childHeight)

注意

  • 只在不指定 alignment 时,origin 才会生效;
  • 如果同时指定 alignment,则 origin 会被忽略。

3.3 alignment 对齐对变换的影响

  • alignment 类型为 Alignment,其数值范围在 [-1, +1]Alignment(x, y) 中:

    • x = -1 → 位于子 Widget 左边缘;x = 0 → 位于子 Widget 水平中心;x = +1 → 位于子 Widget 右边缘;
    • y = -1 → 位于子 Widget 顶部;y = 0 → 位于子 Widget 垂直中心;y = +1 → 位于子 Widget 底部。
// 举例:绕“右上角”旋转
Transform.rotate(
  angle: math.pi / 4,
  alignment: Alignment.topRight, // 锚点在子 Widget 的右上角
  child: MyBox(),
);
  • 效果MyBox() 在绘制时:

    1. 将 Canvas 平移到“子 Widget 右上角”坐标;
    2. 以这个点为中心旋转 π/4;
    3. 再将 Canvas 平移回来。

四、代码示例与图解

下面通过一系列有代表性的示例,结合ASCII 图解,帮助你更直观地理解 Transform 的行为。

4.1 位移示例:平移一个方块

import 'package:flutter/material.dart';

class TransformTranslateDemo extends StatelessWidget {
  const TransformTranslateDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            // 原始位置:蓝色方块
            Positioned(
              left: 50,
              top: 50,
              child: Container(width: 80, height: 80, color: Colors.blue),
            ),
            // 使用 Transform.translate 将红色方块视觉向右下移动
            Positioned(
              left: 50,
              top: 150,
              child: Transform.translate(
                offset: const Offset(40, 40),
                child: Container(width: 80, height: 80, color: Colors.red),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

Y
│
│   (50,50)
│    ┌─────────┐   ← 蓝色方块 (80×80)
│    │  蓝色   │
│    └─────────┘
│
│   (50,150)         * 将 Canvas 平移(40,40),再绘制红色方块 *
│    ┌─────────┐       实际显示坐标 = (50+40, 150+40) = (90,190)
│    │  红色   │   ← 红色方块视觉位置
│    └─────────┘
└────────────────────────────→ X
  • 解释:红色方块在布局阶段仍占据 (50,150) ~ (130,230) 区域,但绘制时 Canvas 被先平移 (40,40),导致视觉上的方块位于 (90,190)~(170,270)

4.2 旋转示例:绕中心 vs 绕自定义原点

import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformRotateDemo extends StatelessWidget {
  const TransformRotateDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 绕中心旋转 45°
            Transform.rotate(
              angle: math.pi / 4, // 45° = π/4
              child: Container(width: 100, height: 60, color: Colors.green),
            ),
            const SizedBox(height: 40),
            // 绕左上角旋转 45°
            Transform.rotate(
              angle: math.pi / 4,
              alignment: Alignment.topLeft,
              child: Container(width: 100, height: 60, color: Colors.orange),
            ),
            const SizedBox(height: 40),
            // 绕自定义原点 (20, 30) 旋转 45°
            Transform.rotate(
              angle: math.pi / 4,
              origin: const Offset(20, 30),
              // origin 相对于左上角
              alignment: Alignment.topLeft, // origin 生效
              child: Container(width: 100, height: 60, color: Colors.purple),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. 绕中心旋转 (绿色)
   Container 原始中心: (50,30)(相对于自己)
   - Canvas 平移到 (50,30),旋转 45°,再平移回
   视觉结果:整个矩形绕自身中心倾斜

2. 绕左上角旋转 (橙色)
   Alignment.topLeft → 原点 = (0,0)
   - Canvas 平移到子 Widget 左上 (0,0), 旋转 45°, 回平移

3. 绕自定义原点 (20,30) 旋转 (紫色)
   origin = (20,30) 相对于子左上
   - Canvas 平移到 (20,30),旋转 45°, 再平移回
   视觉:绕这一偏移点旋转
  • 解释

    1. 默认 alignment = Alignment.center,因此绕 (width/2, height/2) = (50, 30) 旋转;
    2. 设置 alignment: Alignment.topLeft,则绕 (0,0) 旋转;
    3. 设置 origin: Offset(20,30)alignment 同时置为 Alignment.topLeft,这样才会绕自定义原点旋转。

4.3 缩放示例:从中心/某端开始放大

import 'package:flutter/material.dart';

class TransformScaleDemo extends StatelessWidget {
  const TransformScaleDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 默认从中心缩放
            Transform.scale(
              scale: 1.5, // 放大 1.5 倍
              child: Container(width: 80, height: 80, color: Colors.cyan),
            ),
            const SizedBox(height: 40),
            // 从左上角缩放
            Transform.scale(
              scale: 1.5,
              alignment: Alignment.topLeft,
              child: Container(width: 80, height: 80, color: Colors.redAccent),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. 中心缩放 (青色方块)
   原始中心: (40,40)
   - Canvas 平移到 (40,40),scale 1.5,再平移回

2. 左上角缩放 (红色方块)
   alignment: topLeft → 原点 (0,0)
   - Canvas 平移到 (0,0) -> scale 1.5 -> 平移回
  • 视觉差别

    • 青色方块以自身中心放大;
    • 红色方块以左上角放大,会朝右下方向扩展。

4.4 倾斜示例:X 轴与 Y 轴倾斜

import 'package:flutter/material.dart';

class TransformSkewDemo extends StatelessWidget {
  const TransformSkewDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 沿 X 轴倾斜(skewX = 0.3)
            Transform.skew(
              skewX: 0.3,
              skewY: 0.0,
              child: Container(width: 120, height: 60, color: Colors.indigo),
            ),
            const SizedBox(height: 40),
            // 同时沿 X、Y 轴倾斜
            Transform.skew(
              skewX: 0.2,
              skewY: 0.5,
              child: Container(width: 120, height: 60, color: Colors.teal),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. X 轴倾斜 (靛青方块)
   原始矩形: ┌───┐
             │   │
             └───┘
   纵坐标 y 上升时,x 向右按 0.3 * y 移动
   视觉: 右上和右下角都被“向右拉伸”,变为平行四边形

2. X、Y 轴倾斜 (青绿色方块)
   x 轴:y 越大,x 偏移越多(skewX=0.2)
   y 轴:x 越大,y 偏移越多(skewY=0.5)
   结果:更加“斜”的形状
  • 说明

    • skewX 会让上方顶边相对于底边向右偏移;
    • skewY 会让右边顶边相对于左边向下偏移。

4.5 综合示例:组合变换(先旋转再缩放)

使用底层 Matrix4,演示“先旋转 30°,再以中心放大 1.3 倍”:

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter/painting.dart';

class TransformMatrixDemo extends StatelessWidget {
  const TransformMatrixDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..rotateZ(math.pi / 6)      // 旋转 30°
            ..scale(1.3, 1.3),          // 缩放 1.3 倍
          child: Container(
            width: 100,
            height: 60,
            color: Colors.amber,
            child: const Center(child: Text('组合变换')),
          ),
        ),
      ),
    );
  }
}

ASCII 图解

原始矩形 (100×60)
┌────────────────┐
│                │
│   组合变换     │
│                │
└────────────────┘

步骤 1: 绕中心旋转 30°
    /\
   /  \
  /    \
 ───────          (变为一个斜向矩形)
  \    \
   \  /
    \/

步骤 2: 再整体放大 1.3 倍
   视觉上该斜矩形会“均匀扩大”至原大小的 1.3 倍
  • 解释

    • Matrix4.identity():初始化为单位矩阵;
    • ..rotateZ(math.pi/6):在 Z 轴(屏幕垂直方向)旋转 30°;
    • ..scale(1.3, 1.3):再沿 X、Y 等比缩放 1.3 倍;
    • 整体效果先旋转再缩放。

五、进阶:使用 Matrix4 实现三维变换

二维的 translaterotateZscale 已足以满足大多数需求。如果想做“3D 翻转”之类的效果,就必须使用 Matrix4 中的三维旋转透视投影参数。

5.1 什么是 Matrix4?基础概念

  • Matrix4 实际是一个 4×4 的矩阵,常用来在 3D 空间中对点 (x,y,z,1) 进行线性仿射变换透视映射
  • 一般形如:

    [ m00 m01 m02 m03 ]
    [ m10 m11 m12 m13 ]
    [ m20 m21 m22 m23 ]
    [ m30 m31 m32 m33 ]
  • 常用方法:

    • Matrix4.identity():单位矩阵;
    • .translate(x,y,z) / .rotateX(theta) / .rotateY(theta) / .rotateZ(theta) / .scale(sx,sy,sz)
    • .setEntry(row, col, value):直接设置某个元素,通常用于设置透视参数 setEntry(3, 2, perspectiveValue)

5.2 绕 X/Y/Z 轴旋转

Matrix4.identity()
  ..setEntry(3, 2, 0.001) // 透视投影参数:值越小,透视感越强
  ..rotateX(math.pi / 4) // 绕 X 轴 45°
  ..rotateY(math.pi / 6); // 再绕 Y 轴 30°
  • setEntry(3, 2, v):将矩阵 [3][2] 位置设置为 v,用于添加透视缩放
  • rotateX / rotateY / rotateZ:分别在三维空间中绕对应轴旋转。

5.3 视距(perspective)效果

  • 若不加透视(保持 m32 = 0),则只是“正交投影”,即看上去像“旋转的平面”,缺少远近深度感;
  • 设置 m32 = 0.001(通常在 0.001 ~ 0.003 范围)后,Z 值的增加会让 Widget 有近大远小的视觉效果,模拟真实 3D 透视。

5.4 实战示例:3D 翻转卡片

下面演示一个经典的“卡片沿 Y 轴翻转”效果:当 angle 从 0 变化到 π,卡片会先“正面消失”,再逐渐“反面出现”。

import 'package:flutter/material.dart';
import 'dart:math' as math;

class FlipCardDemo extends StatefulWidget {
  const FlipCardDemo({Key? key}) : super(key: key);

  @override
  State<FlipCardDemo> createState() => _FlipCardDemoState();
}

class _FlipCardDemoState extends State<FlipCardDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: math.pi).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget _buildCard(BuildContext context, double angle) {
    final isFront = angle <= math.pi / 2;
    final displayWidget = isFront
        ? Container(
            width: 200,
            height: 120,
            color: Colors.blue,
            child: const Center(child: Text('正面', style: TextStyle(color: Colors.white, fontSize: 24))),
          )
        : Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()..rotateY(math.pi),
            child: Container(
              width: 200,
              height: 120,
              color: Colors.red,
              child: const Center(child: Text('反面', style: TextStyle(color: Colors.white, fontSize: 24))),
            ),
          );
    return Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)  // 透视
        ..rotateY(angle),        // 绕 Y 轴翻转
      child: displayWidget,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('3D 翻转卡片示例')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return _buildCard(context, _animation.value);
          },
        ),
      ),
    );
  }
}

ASCII 图解

初始状态:angle = 0
 ┌────────────────────────┐
 │       蓝色卡片正面      │
 └────────────────────────┘

angle = π/4 (45°)
  _______
 /       \
|  正面   |   (有轻微透视,边缘向内收缩)
 \_______/

angle = π/2 (90°)
  ───────   (卡片正面“消失”于屏幕宽度极小处)

angle = 3π/4 (135°)
  _______
 /       \
|  反面   |   (已翻至背面,显示红色)
 \_______/

angle = π (180°)
 ┌────────────────────────┐
 │       红色卡片背面      │
 └────────────────────────┘
  • 逻辑

    1. angle <= π/2 时,显示正面;
    2. angle > π/2 时,为了让背面正面朝我们,需要另做一次 ..rotateY(math.pi),将其翻转正向显示。

六、性能与注意事项

6.1 对齐方式与布局步骤

  • 由于 Transform 不影响布局尺寸,所以父组件依然会为子 Widget 分配“原始”宽高;如果你对“可点击区域”或“布局碰撞”有要求,需要注意子 Widget 的实际占位并未变化。
  • 如果想让整个控件的点击区域也跟随视觉变换,可考虑把 Transform 放在更外层,或使用 GestureDetector 包裹外层坐标进行检测。

6.2 避免无意义的多层嵌套

  • 不要在每一帧动画中都创建一个新的 Matrix4.identity(),会造成大量临时对象分配。可考虑将 Matrix4 保存为成员变量,在每帧只做 ..setEntry() ..rotate() ..scale() 的链式调用。
  • 如果只是单纯的“居中旋转”而无需三维透视,可以直接用 Transform.rotate 而非手写 Matrix4

6.3 对动画和手势的影响

  • 当使用 Transform 做点击或拖拽交互时,需要注意“命中测试(hit testing)”默认是基于未变换前的子 Widget 区域进行。如果你的视觉效果移出了原始区域,点击可能会“穿透”到下层。

    • 解决办法:在需要交互的 Transform 组件外再包裹一个 GestureDetector 或透明 Container,使其占据视觉外扩后的范围。
  • 如果在动画过程中需要连续观察 anglescale 等变化,建议使用 AnimatedBuilder 而非 setState + Transform,以减少无谓的 build() 调用。

七、总结

本文从以下几方面 深度剖析 了 Flutter 中的 Transform 组件:

  1. Transform 原理:布局阶段不改变大小/位置,只在绘制阶段对 Canvas 做变换;
  2. 常用快捷 API:详解 Transform.translateTransform.rotateTransform.scaleTransform.skew
  3. 原点(origin)与对齐(alignment):控制变换中心的两种方式及其区别;
  4. 代码示例与 ASCII 图解:通过平移、旋转、缩放、倾斜、组合变换等示例,让复杂操作更直观;
  5. Matrix4 三维变换:介绍绕 X/Y/Z 轴旋转与透视投影,示范 3D 翻转卡片效果;
  6. 性能与交互注意事项:提醒你避免无谓内存分配,关注点击区域与动画更新方式。

掌握 Transform 后,你就可以轻松地为 Flutter 应用添加各种过渡动画3D 交互动效微调等炫酷特效。

最后修改于:2025年06月03日 15:03

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日