android - 在屏幕点击时显示(滑入)或隐藏(滑出)flutter AppBar

Question

我正在尝试创建这种效果，当点击屏幕时 AppBar 滑出，再次点击时滑入。

通过将 float 和对齐设置为 true，我能够在 SliverAppBar 中创建类似的东西。不同之处在于 appBar 在向下滚动时显示，在点击或向上滚动屏幕时隐藏。

这是 SliverAppBar 的示例代码:

 @override
  Widget build(BuildContext context) {

    return Scaffold(
          body: CustomScrollView(
            controller: _ctrlr,

                slivers: <Widget>[
                  SliverAppBar(
                    floating: true,
                    snap: true,

                  ),
                  SliverList(
                    delegate: SliverChildListDelegate([
                      Text('1', style: TextStyle(fontSize: 160.0),),
                      Text('2', style: TextStyle(fontSize: 160.0),),
                      Text('3', style: TextStyle(fontSize: 160.0),),
                      Text('4', style: TextStyle(fontSize: 160.0),),
                    ]),
                  )
                ],
        ),
    );
  }  

我怎样才能做到这一点？我还考虑过将 AppBar 放在 Stack 中，但我认为这不是最好的方法。非常感谢您的帮助!

Answer 1

我遇到了类似的需求，并发现了您的问题。由于没有答案，我自己尝试解决问题。我知道你在 6 个月前问过这个问题，但我给出了一个(几乎完整的)答案，以防其他人遇到这个问题。

(如果我的方法不够优雅，我深表歉意，但在撰写本文时，我只使用 Flutter 大约一个星期。:)

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class FramePage extends StatefulWidget {
  final String title;
  final String imageUrl;

  FramePage({Key key, this.title, this.imageUrl}) : super(key: key);

  @override
  _FramePageState createState() => _FramePageState();
}

class _FramePageState extends State<FramePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _appBarVisible;

  @override
  void initState() {
    super.initState();

    _appBarVisible = true;
    _controller = AnimationController(
      duration: const Duration(milliseconds: 700),
      value: 1.0,
      vsync: this,
    );
  }

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

  void _toggleAppBarVisibility() {
    _appBarVisible = !_appBarVisible;
    _appBarVisible ? _controller.forward() : _controller.reverse();
  }

  Widget get _imageWidget {
    return Center(
      child: GestureDetector(
      onTap: () => setState(() { _toggleAppBarVisibility(); } ),
      child: Container(
          foregroundDecoration: new BoxDecoration(color: Color.fromRGBO(155, 85, 250, 0.0)),
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: widget.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context)
  {
    Animation<Offset> offsetAnimation = new Tween<Offset>(
      begin: Offset(0.0, -70),
      end: Offset(0.0, 0.0),
    ).animate(_controller);

    return Scaffold(
      body: Stack(
        children: <Widget>[
          _imageWidget,
          SlideTransition(
            position: offsetAnimation,
            child: Container(
              height: 75,
              child: AppBar(
                title: Text(widget.title),
              ),
            ),
          ),
        ],
      )
    );
  }
}

从本质上讲，AppBar 作为 Scaffold 的直接部分被删除，而是添加到 Stack 中，在那里它可以实际动画。为了确保图像在其后面可见，它被放置在一个容器中，以便控制它的高度(否则，您将无法看到图像)。

在我上面的代码中，点击图像会使 AppBar 缩回，再次点击会使它重新出现。但出于某种原因，我无法真正让它流畅地前后移动，但效果是存在的。

在实践中，它看起来像这样:

如果有人(在我之前)弄清楚我错过了什么来让它顺利地制作动画，请随时提供帮助。