flutter - 如何在 Flutter 中动画隐藏 AppBar？

Question

我需要有关为我的 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',)
                  ],
                )
              ],
            )
      ),
    )));
  }
}

Answer 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',
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}