GestureDetector在正方形翻转动画中无法正常工作的问题

你当前提供的代码里并没有包含你描述的Transform和GestureDetector实现，而且LoginScreenView是无状态组件（StatelessWidget），无法维护翻转动画的状态，这是导致动画无法工作的核心原因之一。要实现点击触发的翻转动画，需要使用**有状态组件（StatefulWidget）**来管理动画状态，结合AnimationController和Transform完成效果。

完整实现示例 #

import 'package:flutter/material.dart';

class LoginScreenView extends StatefulWidget {
  const LoginScreenView({super.key});

  @override
  State<LoginScreenView> createState() => _LoginScreenViewState();
}

class _LoginScreenViewState extends State<LoginScreenView> with SingleTickerProviderStateMixin {
  late TextEditingController _controller;
  late AnimationController _animationController;
  late Animation<double> _flipAnimation;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    // 初始化动画控制器，设置翻转时长
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    // 配置翻转角度：从0到π（对应0-180度翻转）
    _flipAnimation = Tween<double>(begin: 0, end: 3.14159).animate(_animationController);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 100),
            // 用GestureDetector绑定点击事件
            GestureDetector(
              onTap: () {
                // 点击时切换动画状态：完成则倒放，未完成则播放
                _animationController.isCompleted 
                    ? _animationController.reverse() 
                    : _animationController.forward();
              },
              child: AnimatedBuilder(
                animation: _flipAnimation,
                builder: (context, child) {
                  return Transform(
                    // 通过Y轴旋转实现3D翻转
                    transform: Matrix4.rotationY(_flipAnimation.value),
                    alignment: Alignment.center,
                    child: child,
                  );
                },
                child: Container(
                  alignment: Alignment.center,
                  width: 100,
                  color: Colors.white,
                  child: TextField(
                    controller: _controller,
                    onChanged: (value) => print(_controller.text),
                    decoration: const InputDecoration(
                      hintText: "Username",
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• StatefulWidget + SingleTickerProviderStateMixin：必须用有状态组件持有动画控制器，SingleTickerProviderStateMixin为动画提供帧同步能力。
• AnimationController：控制动画的播放、反转周期，务必在dispose中释放资源，避免内存泄漏。
• Transform.rotateY：通过修改Y轴旋转角度实现3D翻转效果，动画值从0到π对应0-180度的翻转。
• AnimatedBuilder：监听动画值变化，仅更新Transform部分的UI，避免整个页面build重复执行，提升性能。

内容的提问来源于stack exchange，提问作者Nicolas Andreas Berlin