dart 为什么我的flutter_animate转换没有发生？

vwhgwdsa 于 2023-09-28 发布在 Flutter

关注(0)|答案(3)|浏览(103)

所以基本上我一直在努力实现一个动画。也使用flutter_animate 4.2.0+1包。首先，让我们看看代码：
在auth_page.dart文件中：

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

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
         ...
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
           ////SEE HERE////
              AuthBox().animate(target: authBoxTarget ? 1 : 0).slideY(
                    delay: Duration(milliseconds: 500),
                    duration: Duration(milliseconds: 500),
                    begin: 0,
                    end: 1,
                  ),
             ///////////
                ],
              ),
            ),
          ),
        );
      }
    }

在按钮的authbox.dart文件中：onTap函数：

onTap: () {
    setState(() {
      authBoxTarget = true;
    });
    Future.delayed(
      Duration(milliseconds: 100),
      () {
        showGeneralDialog(
                 ...
            transitionBuilder: ... );
            return SlideTransition(
              position: tween.animate(...),
              child: child,
            );
          },
          pageBuilder: (context, _, __) {
            return Center(
              child: Container(...
                child: Center(
                  child: Text(
                    'Login',
                    style: TextStyle(...),
                  ),
                ),
              ),
            );
          },
        ).then((_) {
          setState(() {
            authBoxTarget = false;
          });
        });
      },
    );
  },

这应该能用吧- 当对话框出现时，authbox应该向下滑动，当被关闭时，authbox应该重新出现。但这并不是hapenning对话即将到来，但authbox并没有下降...为什么？？？给予我答案。
mail.dart文件：

void main() {
  runApp(
    MyApp(),
  );
  Animate.restartOnHotReload = true;
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const AuthPage(),
    );
  }
}

dart

来源：https://stackoverflow.com/questions/77117468/why-is-my-flutter-animate-transition-not-hapenning

3条答案

按热度按时间

fcwjkofz1#

向AuthBox添加回调以切换动画状态：

AuthBox(onDismiss: () => setState(() => authBoxTarget = !authBoxTarget))

在AuthBox中接收回调：

class AuthBox extends StatelessWidget {
  final VoidCallback onDismiss;
  ...
}

在对话框中使用WillPopScope来处理dismisses（并删除对话框中的.then（））：

onPressed: () async {
            onDismiss();
            await Future.delayed(
              const Duration(milliseconds: 300),
              () => showGeneralDialog(
                context: context,
                pageBuilder: (BuildContext buildContext, Animation animation, Animation secondaryAnimation) {
                  return WillPopScope(
                    onWillPop: () async {
                      onDismiss();
                      return true;
                    },
                    child: /*your dialog content */
)}));

赞(0）回复(0）举报 2023-09-28

rjzwgtxy2#

好吧，经过大量的研究，这终于是如何做到这一点。
authbox.dart：

class AuthBox extends StatefulWidget {

  final void Function(bool) callback; //add this line here
  const AuthBox({super.key, required this.callback}); //update this line
.
.
.

class _AuthBoxState extends State<AuthBox> {
 @override
 Widget build(BuildContext context) {
  return ... (
.
.
.

onTap: (){ //inside onTap function

  widget.callback(true); //add this line

  Future.delayed(
    Duration (milliseconds: 100)

    showGeneratDiatog(...

          //at the end of showGeneratDiatog add the following then function
     ...).then((_) {
            widget.callback(false);
          });

auth_page.dart：

class _AuthPageState extends State<AuthPage> {

  bool authBoxTarget = false; //add the following boolean 

  //define the following function
  void triggerAuthBoxAnimation(bool showAuthBox) {
    setState(() {
      authBoxTarget = showAuthBox;
    });
  }
.
.
.   

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(...
    ... AuthBox(
                callback: triggerAuthBoxAnimation, //add the required callback function
              )
                  .animate(target: authBoxTarget ? 1 : 0) //add the target to animate
                  .slideY(
                      delay: Duration(milliseconds: 100),
                      duration: Duration(milliseconds: 400),
                      begin: 0,
                      end: 1,
                  )

就这样。现在它应该能按预期工作了。当单击authbox中的按钮时，它将通过void Function(bool) callback;通知authpage，并将通过void triggerAuthBoxAnimation function将authBoxTarget值更改为true，因此target值将为1，并且两个动画将一起发生。

赞(0）回复(0）举报 2023-09-28

guicsvcw3#

如果你想同时运行两个动画，你可以在代码中声明一个新的bool，例如：

bool isButtonPressed=false;

然后，在onTap处理程序中，在开头添加以下内容：

setState(() {
              isButtonPressed = true;
            });

在showGeneralDialog之后，添加以下内容：

.then((value) {
                  setState(() {
                    isButtonPressed = false;
                  });
                })

这是你的Animate Widget的代码，里面有authbox：

isButtonPressed
          ? Animate(
              effects: [
                SlideEffect(
                  end: Offset(0, 1),
                  delay: Duration(milliseconds: 400),
                  duration: Duration(milliseconds: 800),
                  curve: Curves.ease,
                ),
              ],
              child: authbox(),
            )
          : authbox()

简单的解决方案，但它的工作。如果你还有其他问题，可以在评论中提问。

赞(0）回复(0）举报 2023-09-28

我来回答

dart 为什么我的flutter_animate转换没有发生？

3条答案

相关问题

热门标签

最新问答