在屏幕水龙头上显示（滑入）或隐藏（滑出）抖动AppBar [英] Show (slide in) or hide (slide out) flutter AppBar on screen tap

问题描述

请尝试在点击屏幕时滑动AppBar并在再次点击屏幕时滑动AppBar来创建这种效果。

Please I am trying to create this effect where the AppBar slides out when the screen is tapped and slides in when it is tapped again.

我能够通过SliverAppBar创建类似的内容将浮动和对齐设置为true。区别在于appBar在向下滚动时显示，而在轻击或向上滚动屏幕时隐藏。

I am able to create something similar in SliverAppBar by setting floating and snap to true. The difference is that the appBar shows when scrolling down and hides when screen is tapped or scrolled up.

以下是SliverAppBar的示例代码：

Here is the sample code for the 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放在堆栈中，但我认为这不是最好的方法。

How can I be able to achieve this? I also considered placing the AppBar in a Stack but i don't think that is the best approach. Your help will be greatly appreciated!

推荐答案

我遇到了类似的需求，发现了您的问题。由于没有答案，因此我自己尝试解决问题。我知道您在6个月前问过这个问题，但是如果有其他人发生，我会提供一个（几乎完整的）答案。

I came upon a similar need, and discovered your question. Since there were no answers, I took it upon myself to try and solve the problem. I know you asked this 6 months ago, but I'm putting in an (nearly complete) answer in case anybody else happens upon it.

（如果我的方法很抱歉，虽然不够优雅，但在撰写本文时，我只使用Flutter约一周。：）

(I apologize if my approach is less than elegant, but as of this writing, I've only been using Flutter for about a week. :)

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被直接删除为脚手架，而是添加到堆栈中，在其中可以对其进行动画处理。为了确保图像在其后面可见，将其放置在容器中，以便可以控制其高度（否则，您将无法看到图像）。

Essentially, the AppBar is removed as a direct part of the Scaffold, and instead is added to the Stack, where it can actually be animated. In order to make sure the image is visible behind it, it is placed into a Container so it's height can be controlled (otherwise, you would not be able to see the image).

在上面的代码中，点击图像会使AppBar缩回，再次点击则使其重新出现。但是由于某种原因，我无法真正使它前后平滑地动画，但是效果在那里。

In my code above, tapping on the image makes the AppBar retract, and tapping again makes it re-appear. For some reason, though, I haven't been able to actually get it to smoothly animate forward and back, but the effect is there.

实际上，它看起来像这样：

In practice, it looks like this:

如果有人（在执行此操作之前）弄清楚了我无法使其平滑动画所需的内容，请随时提供帮助。

If somebody figures out (before I do) what I've missed to make it animate smoothly, please feel free to help out.

这篇关于在屏幕水龙头上显示（滑入）或隐藏（滑出）抖动AppBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！