所以基本上我一直在try 实现一个动画.还用了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不会倒下……为什么?给我一个解决方案.

mail.dart个文件: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(),
    );
  }
}

推荐答案

好的,经过大量的研究,这终于是怎么做的了.

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值更改为真,因此target值将为1,并且两个动画将一起发生.

Flutter相关问答推荐

Firebase Auth异常未被catch捕获

想更新ListView上的索引点击块Flutter

下拉图标未居中

audioQuery不会等待判断存储权限

Flutter 中的多页表现

摆动如何更改弹出菜单项高亮显示 colored颜色 半径

遇到图像路径格式问题

就像Flutter 中的头文件一样?

使用持久的侧边菜单和顶部栏在Ffltter Web应用程序中的页面之间导航

摆动更改标记可轻敲文本按钮样式

使用 forLoops 在 Dart 中进行单元测试会返回 stackoverflow

使用 Flutter 和 Dio 将图像上传到 API

自定义绘画未显示 - Flutter

什么最接近 Dart 的 List.asMap().forEach() 返回列表?

MediaQuery 在不同手机上不一致

当项目较少时收缩列表视图

Flutter 构建方法使用的是旧版本的变量?

在 flutter 中使用 StreamBuilder 在文本字段中键入时显示过滤记录

我们什么时候在flutter中初始化一个provider?

如何使用我拥有的 .jks 文件签署我的应用程序