Flutter 以编程方式显示/隐藏颤振中的小部件

在Android中，每个

视图

子类都有一个

setVisibility（）

方法，允许您修改

视图

对象的可见性

设置可见性有3个选项：

• 可见：呈现布局内部可见的

  视图

• 不可见：隐藏

  视图

  ，但留下一个与

  视图

  在可见时将占据的空间相等的间隙
• 消失：隐藏

  视图

  ，并将其完全从布局中删除。就好像它的

  高度

  和

  宽度

  是

  0dp

对于flatter中的小部件，是否有与上面相同的东西

快速参考：

---

更新：自编写此答案以来，已介绍并提供了此问题的最佳解决方案

---

您可以使用

Opacity

和

Opacity:

的

0.0

来绘制元素，使其隐藏但仍占据空间

要使其不占用空间，请将其替换为空的

容器（）

编辑：
要将其包裹在不透明对象中，请执行以下操作：

            new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))

Google开发者关于不透明性的快速教程：
与问题协作，并展示一个用空的
容器（）替换它的示例。

下面是一个例子：


导入“包装：颤振/材料.省道”；
void main（）{
runApp（新的ControlleApp（））；
}
类ControlleApp扩展了无状态控件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“我的应用程序”，
主页：新主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
HomePageState createState（）=>新建HomePageState（）；
}
类HomePageState扩展了状态{
bool visibilityTag=假；
布尔可视性OBS=假；
void\u已更改（布尔可见性，字符串字段）{
设置状态（）{
如果（字段==“标记”）{
visibilityTag=可见性；
}
如果（字段==“obs”）{
可视性OBS=可视性；
}
});
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar:new appBar（背景色：new Color（0xFF26C6DA）），
正文：新列表视图(
儿童：[
新容器(
裕度：新边集。全部（20.0），
儿童：新标志（尺寸：100.0，颜色：颜色。蓝色），
),
新容器(
边距：仅限新边集（左：16.0，右：16.0），
子：新列(
儿童：[
可视性OBS？新行(
crossAxisAlignment:crossAxisAlignment.end，
儿童：[
新扩展(
弹性：11，
孩子：新文本字段(
maxLines:1，
样式：Theme.of（context）.textTheme.title，
装饰：新的输入装饰(
labelText:“观察”，
是的
),
),
),
新扩展(
弹性：1，
孩子：新的图标按钮(
颜色：颜色。灰色[400]，
图标：常量图标（Icons.cancel，大小：22.0，），
已按下：（）{
_更改（错误，简称“obs”）；
},
),
),
],
)：新容器（），
visibilityTag？新行(
crossAxisAlignment:crossAxisAlignment.end，
儿童：[
新扩展(
弹性：11，
孩子：新文本字段(
maxLines:1，
样式：Theme.of（context）.textTheme.title，
装饰：新的输入装饰(
标签文本：“标签”，
是的
),
),
),
新扩展(
弹性：1，
孩子：新的图标按钮(
颜色：颜色。灰色[400]，
图标：常量图标（Icons.cancel，大小：22.0，），
已按下：（）{
_更改（假，“标签”）；
},
),
),
],
)：新容器（），
],
)
),
新行(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
新墨水池(
onTap:（）{
可视性obs？null:_已更改（真，“obs”）；
},
子容器：新容器(
边距：仅限新边集（顶部：16.0），
子：新列(
儿童：[
新图标（Icons.comment，颜色：visibilityObs？Colors.grey[400]：Colors.grey[600]），
新容器(
边距：仅限常量边集（顶部：8.0），
儿童：新文本(
“观察”，
样式：新文本样式(
字体大小：12.0，
fontWeight:fontWeight.w400，
颜色：可视性OBS？颜色。灰色[400]：颜色。灰色[600]，
),
),
),
],
),
)
),
新尺寸盒子（宽度：24.0），
新墨水池(
onTap:（）{
visibilityTag？null:_已更改（真，“标记”）；
},
子容器：新容器(
页边：ne
import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My App",
      home: new HomePage(),
    );
  }
}

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

class HomePageState extends State<HomePage> {
  bool visibilityTag = false;
  bool visibilityObs = false;

  void _changed(bool visibility, String field) {
    setState(() {
      if (field == "tag"){
        visibilityTag = visibility;
      }
      if (field == "obs"){
        visibilityObs = visibility;
      }
    });
  }

  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
      body: new ListView(
        children: <Widget>[
          new Container(
            margin: new EdgeInsets.all(20.0),
            child: new FlutterLogo(size: 100.0, colors: Colors.blue),
          ),
          new Container(
            margin: new EdgeInsets.only(left: 16.0, right: 16.0),
            child: new Column(
              children: <Widget>[
                visibilityObs ? new Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    new Expanded(
                      flex: 11,
                      child: new TextField(
                        maxLines: 1,
                        style: Theme.of(context).textTheme.title,
                        decoration: new InputDecoration(
                          labelText: "Observation",
                          isDense: true
                        ),
                      ),
                    ),
                    new Expanded(
                      flex: 1,
                      child: new IconButton(
                        color: Colors.grey[400],
                        icon: const Icon(Icons.cancel, size: 22.0,),
                        onPressed: () {
                          _changed(false, "obs");
                        },
                      ),
                    ),
                  ],
                ) : new Container(),

                visibilityTag ? new Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    new Expanded(
                      flex: 11,
                      child: new TextField(
                        maxLines: 1,
                        style: Theme.of(context).textTheme.title,
                        decoration: new InputDecoration(
                          labelText: "Tags",
                          isDense: true
                        ),
                      ),
                    ),
                    new Expanded(
                      flex: 1,
                      child: new IconButton(
                        color: Colors.grey[400],
                        icon: const Icon(Icons.cancel, size: 22.0,),
                        onPressed: () {
                          _changed(false, "tag");
                        },
                      ),
                    ),
                  ],
                ) : new Container(),
              ],
            )
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new InkWell(
                onTap: () {
                  visibilityObs ? null : _changed(true, "obs");
                },
                child: new Container(
                  margin: new EdgeInsets.only(top: 16.0),
                  child: new Column(
                    children: <Widget>[
                      new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
                      new Container(
                        margin: const EdgeInsets.only(top: 8.0),
                        child: new Text(
                          "Observation",
                          style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
              new SizedBox(width: 24.0),
              new InkWell(
                onTap: () {
                  visibilityTag ? null : _changed(true, "tag");
                },
                child: new Container(
                  margin: new EdgeInsets.only(top: 16.0),
                  child: new Column(
                    children: <Widget>[
                      new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
                      new Container(
                        margin: const EdgeInsets.only(top: 8.0),
                        child: new Text(
                          "Tags",
                          style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
            ],
          )                    
        ],
      )
    );
  }
}

class Visibility extends StatefulWidget {
  @override
  _VisibilityState createState() => _VisibilityState();
}

class _VisibilityState extends State<Visibility> {
  bool a = true;
  String mText = "Press to hide";

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Visibility",
      home: new Scaffold(
          body: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new RaisedButton(
                onPressed: _visibilitymethod, child: new Text(mText),),
                a == true ? new Container(
                width: 300.0,
                height: 300.0,
                color: Colors.red,
              ) : new Container(),
            ],
          )
      ),
    );
  }

  void _visibilitymethod() {
    setState(() {
      if (a) {
        a = false;
        mText = "Press to show";
      } else {
        a = true;
        mText = "Press to hide";
      }
    });
  }
}

IconButton(
    icon: Image.asset("myImage.png",
        color: Colors.transparent,
    ),
    onPressed: () {},
),

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

Visibility(
  child: Text("Gone"),
  visible: false,
),

class ShowWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  ShowWhen({this.child, this.condition});

  @override
  Widget build(BuildContext context) {
    return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
  }
}

class RenderWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  RenderWhen({this.child, this.show});

  @override
  Widget build(BuildContext context) {
    return this.condition ? this.child : Container();
  }
}

    Visibility(
      visible: true //Default is true,
      child: Text('Ndini uya uya'),
      //maintainSize: bool. When true this is equivalent to invisible;
      //replacement: Widget. Defaults to Sizedbox.shrink, 0x0
    ),

Offstage(
   offstage: true,
   child: Text("Visible"),
),

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              Text('This is text one'),
              if (_isVisible) Text('can be hidden or shown'), // no dummy container/ternary needed
              Text('This is another text'),
              RaisedButton(child: Text('show/hide'), onPressed: (){
                  setState(() {
                    _isVisible = !_isVisible; 
                  });
              },)

          ],
        )

bool _visible = false;

 void _toggle() {
    setState(() {
      _visible = !_visible;
    });
  }

onPressed: _toggle,

Visibility(
            visible:_visible,
            child: new Container(
            child: new  Container(
              padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
              child: new Material(
                elevation: 10.0,
                borderRadius: BorderRadius.circular(25.0),
                child: new ListTile(
                  leading: new Icon(Icons.search),
                  title: new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                        hintText: 'Search for brands and products', border: InputBorder.none,),
                    onChanged: onSearchTextChanged,
                  ),
                  trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                    onSearchTextChanged('');
                  },),
                ),
              ),
            ),
          ),
          ),

void checkVisibilityButton() {
  setState(() {
  isVisibileNextBtn = indexPage + 1 < pages.length;
  });
}    

 Stack(children: <Widget>[
      PageView.builder(
        itemCount: pages.length,
        onPageChanged: (index) {
          indexPage = index;
          checkVisibilityButton();
        },
        itemBuilder: (context, index) {
          return pages[index];
        },
        controller: controller,
      ),
      Container(
        alignment: Alignment.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Visibility(
              visible: isVisibileNextBtn,
              child: "your widget"
            )
          ],
        ),
      )
    ]))

          Visibility(
              visible: false,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    width: 10,
                  ),
                  Text("Search",
                    style: TextStyle(fontSize: 20
                    ),),
                ],
              ),
            ),

  @override
  Widget build(BuildContext context) {
    return someFlag ? Text('Here I am') : SizedBox();
  }

AnimatedOpacity(
   opacity: this.isLuckyTime ? 1.0 : 0.0,
   duration: Duration(milliseconds: 500),
   child: Text('I am feeling lucky')
)