如何在 Flutter 中使用 GestureDetector 隐藏 appBar？

Posted 2023-02-23

【中文标题】如何在 Flutter 中使用 GestureDetector 隐藏 appBar？

【英文标题】：How to hide appBar using GestureDetector in Flutter?

【发布时间】：2021-04-03 12:15:05

【问题描述】：

每当我点击屏幕时，我一直在尝试使用 GestureDetector 小部件在 Flutter 中隐藏 AppBar。

但它不起作用。以下是我的代码：

import 'package:flutter/material.dart';

// This is the page widget
class PageWidget extends StatefulWidget 
  final String title;
  PageWidget(Key key, this.title) : super(key: key);

  @override
  _PageWidgetState createState() => _PageWidgetState();


class _PageWidgetState extends State<PageWidget> 
  Widget build(BuildContext context) 
    // making the AppBar
    bool _showAppBar = true;
    final appBar = AppBar(
      title: Text("Page one"),
      centerTitle: true,
      backgroundColor: Colors.teal,
    );
    final body = Container(
      child: GestureDetector(
        onTap: () 
          setState(() => _showAppBar = !_showAppBar);
          print("This GestureDetector");
        ,
        behavior: HitTestBehavior.translucent,
        // content of the page.
        child: SingleChildScrollView(
        ),
      ),
    );
    
    return Scaffold(
      appBar: _showAppBar ? appBar : null,
      body: body,
    );
  

这是怎么回事？

【参考方案1】：

您必须将bool _showAppBar = true; 移到小部件的构建之外。当状态更新时，它会重建小部件。因此，您总是在变量上得到 true 。像这样：

class _PageWidgetState extends State<PageWidget> 
  bool _showAppBar = true;

  Widget build(BuildContext context) 
    final appBar = AppBar(
      title: Text("Page one"),
      centerTitle: true,
      backgroundColor: Colors.teal,
    );

【讨论】：

非常感谢它完成了这项工作..??? 你能告诉我如何在 GestureDetector 中同时实现 'onTap:' 和 'onScroll' 属性，或者是否有任何其他小部件可以做两者都有？

您可以使用 GestureDetector、onPanDown、onPanStart 等做很多事情：api.flutter.dev/flutter/widgets/GestureDetector-class.html - 希望对您有所帮助