为什么可见性在颤振中不起作用？答案

【问题标题】：Why the Visibility doesn't work in flutter?为什么可见性在颤振中不起作用？
【发布时间】：2020-10-02 12:52:10
【问题描述】：

我想通过单击 AppBar 的 IconButton 来隐藏我的 Image 容器。但是我的 AppBar 的 IconButton 不起作用。 我想，我的代码出错了.....

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    bool viewVisible = true;

  /*  void showWidget() {
      setState(() {
        viewVisible = true;
      });
      print("Pressed");
    }
*/
    void hideWidget() {
      setState(() {
        viewVisible = false;
        print("Work");
      });
    }


    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("Icon & Image Shadow Demo"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_drop_down_circle),
                onPressed: hideWidget,
              )
            ],
          ),
          body: Stack(
            children: <Widget>[
             ListView(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                            showShadow: false,
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5.0,
                      ),
                      Visibility(
                        maintainAnimation: true,
                        maintainSize: true,
                        maintainState: true,

                        visible: viewVisible,
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.8),
                                spreadRadius: 5,
                                blurRadius: 3,
                                offset:
                                    Offset(5, 7), // changes position of shadow
                              ),
                            ],
                          ),
                          child: Image.asset("assets/images/download.png"),
                        ),
                      )
                    ],
                  ),
                ],
              )
            ],

          )),
    );
  }
}

【问题讨论】：

标签： flutter visibility

【解决方案1】：

将bool viewVisible = true;移到构建方法之外并且最好也移动 hideWidget，否则每次构建时您都会一次又一次地声明该函数

class _HomePageState extends State<HomePage> {

  bool viewVisible = true;


  void hideWidget() {
    setState(() {
      viewVisible = false;
      print("Work");
    });
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("Icon & Image Shadow Demo"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_drop_down_circle),
                onPressed: hideWidget,
              )
            ],
          ),
          body: Stack(
            children: <Widget>[
             ListView(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                            showShadow: false,
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5.0,
                      ),
                      Visibility(
                        maintainAnimation: true,
                        maintainSize: true,
                        maintainState: true,

                        visible: viewVisible,
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.8),
                                spreadRadius: 5,
                                blurRadius: 3,
                                offset:
                                    Offset(5, 7), // changes position of shadow
                              ),
                            ],
                          ),
                          child: Image.asset("assets/images/download.png"),
                        ),
                      )
                    ],
                  ),
                ],
              )
            ],

          )),
    );
  }
}

【讨论】：

【解决方案2】：

在顶部定义 viewVisible ：

class _HomePageState extends State<HomePage> {
  bool viewVisible = true;
  @override
  Widget build(BuildContext context) {

它没有更新，因为您在 build 方法中初始化了 viewVisible，并且它曾经在每个 setstate 进行构建，使其成为 true，并且永远不会变为 false。

【讨论】：