在Android中,每个单独的View子类都有一个setVisibility()方法,允许你修改View对象的可见性

有3个设置可见性的选项:

可见:在布局中显示视图 不可见:隐藏视图,但留下一个空白,相当于视图在可见时所占据的空白 消失:隐藏视图,并将其完全从布局中移除。就好像它的高和宽都是0dp

对于Flutter中的小部件,是否有与上述相同的东西?

快速参考: https://developer.android.com/reference/android/view/View.html#attr_android:visibility


当前回答

定义:

不可见:小部件占用屏幕上的物理空间,但对用户不可见。这可以使用可见度小部件来实现。

消失:小部件不占用任何物理空间,完全消失。这可以使用Visibility, if或if-else条件来实现。

无形的例子:

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

例子:

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

使用如果:

对于一个孩子: 列( 孩子们:<部件> ( Text('Good Morning'), //始终可见 if (wishOnePerson) Text(' Mr ABC'), //只有条件为真时才可见 ), ) 对于多个孩子: 列( 孩子:( Text('Good Morning'), //始终可见 如果(但愿)……[//只有当condition为true时,这些子元素才可见 文本(“ABC先生”), 文本(“DEF先生”), 文本(“某某先生”), ), ), )

使用if - else:

对于一个孩子: 列( 孩子们:<部件> ( //基于'isMorning'条件,只有一个是可见的 if (isMorning) Text('Good Morning') Text ('Good Evening'), ), ) 对于多个孩子: 列( 孩子:( //在' beforeSunset '条件下,只会显示一个子元素 if (beforeSunset)…[ 文本(“早上好”), 文本('下午好'), 其他的…[ 文本(“晚上好”), 文本('晚安'), ), ), )

其他回答

尝试Offstage小部件

如果属性off - stage:true则不占用物理空间且不可见,

如果属性offstage:false它将占用物理空间而可见

Offstage(
   offstage: true,
   child: Text("Visible"),
),
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('');
                  },),
                ),
              ),
            ),
          ),
          ),

Flutter现在包含一个可见性小部件,您可以使用它来显示/隐藏小部件。小部件还可以通过更改替换来在两个小部件之间切换。

这个小部件可以实现任何可见、不可见、消失等状态。

    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
    ),

在flutter 1.5和Dart 2.3中,对于可视性消失,您可以在集合中使用if语句设置可见性,而不必使用容器。

e.g

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; 
                  });
              },)

          ],
        )

更新

Flutter现在有一个可见性小部件。要实现您自己的解决方案,请从下面的代码开始。


自己做一个小部件。

显示/隐藏

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();
  }
}

顺便问一下,有没有人对上面的小部件有更好的名字?

更多的阅读

关于如何制作可见性小部件的文章。