如何在 Flutter 中动画隐藏 AppBar？答案

【问题标题】：How to animate hiding AppBar in Flutter?如何在 Flutter 中动画隐藏 AppBar？
【发布时间】：2019-09-12 17:19:52
【问题描述】：

我需要帮助为我的 AppBar 设置动画。

我的 AppBar 在 DoubleTap 上隐藏，但里面没有动画，它立即隐藏。我希望它是动画的。我试图用 SlideTransition 和 AnimatedContainer 小部件包装我的 AppBar，但这些都不起作用，因为错误说我需要一个 PreferredSize 小部件。

如果有人帮助我，我会非常高兴！

我已经查看了这个答案，但是回答这个问题的人也有同样的问题。没有动画。 Show (slide in) or hide (slide out) flutter AppBar on screen tap

这是我的 AppBar 的视频： https://streamable.com/it7ib

这是我的 AppBar 的照片：

代码：

import 'package:flutter/material.dart';

class GeneratedCouponScreen extends StatefulWidget {
  @override
  _GeneratedCouponScreenState createState() => _GeneratedCouponScreenState();
}

class _GeneratedCouponScreenState extends State<GeneratedCouponScreen> {

  bool showAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: showAppBar ?  AppBar() : null ,
      backgroundColor: Colors.white,
      body: GestureDetector(
        onDoubleTap: () {
          if (showAppBar) {
            setState(() {
              showAppBar = false;
            });
          } 
          else {
            setState(() {
              showAppBar = true; 
            });
          }
        },
        child: SafeArea(
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: [
                Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black),),
                      Text('10/09/2019', style: TextStyle(color: Colors.black))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black)),
                      Text('e-86-tC-9', style: TextStyle(color: Colors.black))
                    ],
                  )
                  ],
                ),
                Column(
                  children: [
                    SizedBox(height: 8.0),
                    Image.asset('assets/images/coupon_hamburger.png',)
                  ],
                )
              ],
            )
      ),
    )));
  }
}

【问题讨论】：

stackoverflow.com/questions/53490116/…
是的，我也找到了这个答案，但是回答这个问题的人也有同样的问题。他的 AppBar 中没有动画，他和我一样。我应该指出我已经找到了答案。
所以你可以使用 PreferredSize 小部件：``` appBar: PreferredSize(preferredSize: Size.fromHeight(50.0), // 这里是期望的高度 child: AppBar( // ... ) ), ` `` 我认为您可以在应用 PreferdSize 小部件后为您的 appBar 设置动画

标签： flutter dart

【解决方案1】：

一种方法是使用堆栈和 AnimatedBuilder。

class GeneratedCouponScreen extends StatefulWidget {
  @override
  _GeneratedCouponScreenState createState() => _GeneratedCouponScreenState();
}

class _GeneratedCouponScreenState extends State<GeneratedCouponScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) => Stack(
            children: <Widget>[
              Transform.translate(
                offset: Offset(0, -_controller.value * 64),
                child: Container(
                  height: 56.0,
                  child: AppBar(
                    title: Text('Title'),
                    leading: Icon(
                      Icons.arrow_back,
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onDoubleTap: () {
                  if (_controller.isCompleted) {
                    _controller.reverse();
                  } else {
                    _controller.forward();
                  }
                },
                child: Container(
                  margin: const EdgeInsets.only(top: 56.0),
                  padding: EdgeInsets.all(16.0),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'DATA WYDANIA:',
                                style: TextStyle(color: Colors.black),
                              ),
                              Text('10/09/2019',
                                  style: TextStyle(color: Colors.black))
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('UNIKALNY KOD:',
                                  style: TextStyle(color: Colors.black)),
                              Text('e-86-tC-9',
                                  style: TextStyle(color: Colors.black))
                            ],
                          )
                        ],
                      ),
                      Column(
                        children: [
                          SizedBox(height: 8.0),
                          Image.network(
                            'http://via.placeholder.com/640x360',
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

很抱歉现在才回答，但我还有一个问题。隐藏这个AppBar后，如何将下面的内容向上移动？
嗯，有多种方法。一种方法是像应用栏一样翻译所有小部件。

【解决方案2】：

首先你必须创建一个新类

class MyAppBar extends StatefulWidget implements PreferredSizeWidget {


num height = 70.0;
  @override
  _MyAppBarState createState() => _MyAppBarState();

  @override
  Size get preferredSize => Size.fromHeight(height);
}

class _MyAppBarState extends State<MyAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        onDoubleTap: () {
          // Your logic here
          // You can do any stuff like animating your this appBar
          //e.g: using Opacitiy or Transform and any other Widget depending on what kind of animation you want
          // You can also descrease height by calling widget.height
        },
        child: AppBar(
            //Your logic here
            ),
      ),
    );
  }
}

那就这样称呼吧

 return Scaffold(
  appBar: MyAppBar(),);

【讨论】：