如何正确使用 Flutter Transform widget 旋转角度

Question

我使用 Flutter Transform 小部件在 Y 轴上旋转其他小部件。我正在 Android SDK 31 上进行测试。

我的期望是将旋转角度设置为 180 度会给我一个完全“翻转”的图像，就像它自己的镜像一样。但是，当我在 rotateY 中使用 180 时，图像没有完全旋转。使用值 160 实际上看起来更好。

我是否错误地使用了这些值，或者 Transform 中是否存在错误？我的高中几何有点模糊，所以我很可能误解了它应该如何工作。

要在您的 Flutter 项目中重现此代码片段：

    Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4(
                  1,0,0,0,
                  0,1,0,0,
                  0,0,1,0,
                  0,0,0,1,
                )..rotateY(180),
                child: Image.network(
                    'https://clipground.com/images/demo-clip-art-14.jpg')),
          ],

下面完全可重现的代码（只需将其粘贴到新的 Flutter 项目中 main.dart）：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Flip Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _flip = false;

  void _flipImage() {
    setState(() {
      _flip = !_flip;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4(
                  1,0,0,0,
                  0,1,0,0,
                  0,0,1,0,
                  0,0,0,1,
                )..rotateY(_flip ? 180 : 0),
                child: Image.network(
                    'https://clipground.com/images/demo-clip-art-14.jpg')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _flipImage,
        tooltip: 'Flip',
        child: const Icon(Icons.flip_camera_android),
      ),
    );
  }
}

Answer 1

只需要使用 pi 而不是 180

import 'dart:math';


    ..rotateY(_flip ? 0 : pi),

如何正确使用 Flutter Transform widget 旋转角度

How to use Flutter Transform widget rotational angle correctly

android

transform

flutter