Flutter：如何仅在滚动后显示 AppBar？

Posted 2023-02-23

【中文标题】Flutter：如何仅在滚动后显示 AppBar？

【英文标题】：Flutter: How to show AppBar only after scrolling?

【发布时间】：2021-08-04 19:16:27

【问题描述】：

这就是你读到的。我不想隐藏AppBar滚动时，有很多信息。

我想要的恰恰相反。我希望我的主页打开没有 AppBar，然后，当用户开始滚动时，将显示 appbar。

这个网站完全符合我的要求：https://www.kirschnerbrasil.cc/（在桌面版中）。

我想我需要使用SliverAppBar，但我还没有设法这样做。有人可以帮忙吗？

谢谢！

【参考方案1】：

在这种情况下，您必须将自定义小部件设为应用栏。请看下面的代码，它会帮助你理解这个过程：

class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  // Height of your Container
  static final _containerHeight = 100.0;

  // You don't need to change any of these variables
  var _fromTop = -_containerHeight;
  var _controller = ScrollController();
  var _allowReverse = true, _allowForward = true;
  var _prevOffset = 0.0;
  var _prevForwardOffset = -_containerHeight;
  var _prevReverseOffset = 0.0;

  @override
  void initState() 
    super.initState();
    _controller.addListener(_listener);
  

  // entire logic is inside this listener for ListView
  void _listener() 
    double offset = _controller.offset;
    var direction = _controller.position.userScrollDirection;

    if (direction == ScrollDirection.reverse) 
      _allowForward = true;
      if (_allowReverse) 
        _allowReverse = false;
        _prevOffset = offset;
        _prevForwardOffset = _fromTop;
      

      var difference = offset - _prevOffset;
      _fromTop = _prevForwardOffset + difference;
      if (_fromTop > 0) _fromTop = 0;
     else if (direction == ScrollDirection.forward) 
      _allowReverse = true;
      if (_allowForward) 
        _allowForward = false;
        _prevOffset = offset;
        _prevReverseOffset = _fromTop;
      

      var difference = offset - _prevOffset;
      _fromTop = _prevReverseOffset + difference;
      if (_fromTop < -_containerHeight) _fromTop = -_containerHeight;
    
    setState(() ); // for simplicity I'm calling setState here, you can put bool values to only call setState when there is a genuine change in _fromTop
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("ListView")),
      body: Stack(
        children: <Widget>[
          _yourListView(),
          Positioned(
            top: _fromTop,
            left: 0,
            right: 0,
            child: _yourContainer(),
          )
        ],
      ),
    );
  

  Widget _yourListView() 
    return ListView.builder(
      itemCount: 100,
      controller: _controller,
      itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
    );
  

  Widget _yourContainer() 
    return Opacity(
      opacity: 1 - (-_fromTop / _containerHeight),
      child: Container(
        height: _containerHeight,
        color: Colors.red,
        alignment: Alignment.center,
        child: Text("Your Container", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.white)),
      ),
    );
  

【讨论】：

天才！谢谢你。我想知道是否可以让 AppBar 仅在到达顶部时消失，而不是在用户向上滚动时消失。

使用我提供的代码。您将能够这样做。