如何在双击时动态隐藏AppBar？

Question

我想在容器上的DoubleTap上动态隐藏和显示App Bar，并在隐藏时显示一些动画，但是此链接的解决方案不适用于我的项目：Flutter - How can I dynamically show or hide App Bars on pages

应用图片：

代码：

import 'package:flutter/material.dart';

class GeneratedCouponScreen extends StatelessWidget {

  bool ShowAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ShowAppBar ? AppBar(
        title: Text('Makdolan Flutter'),
      ) : null ,
      backgroundColor: Colors.white,
      body: GestureDetector(
        onDoubleTap: () {
          ShowAppBar = false;
        },
        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

使用setState

onDoubleTap: () {
  setState(() => ShowAppBar = false); // you missed setState
}

更新（完整代码）：

void main() => runApp(MaterialApp(home: YourPage()));

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _showAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar() : null,
      body: Center(
        child: GestureDetector(
          onDoubleTap: () => setState(() => _showAppBar = !_showAppBar),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

Answer 2

将窗口小部件类型更改为有状态窗口小部件

注意：setState（）与全状态小部件一起使用

void main() {
  runApp(
    MaterialApp(
      home:
     App(),
    ),
  );
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {

  bool showAppBar = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: showAppBar ? AppBar(
          title: Text('Makdolan Flutter'),
        ) : null ,
        backgroundColor: Colors.white,
        body: GestureDetector(
          onDoubleTap: () {
            setState(() {
              showAppBar = true;
            });
          },
           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',)
                    ],
                  )
                ],
              )
          ),
        ));
}
}