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

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

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

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

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


当前回答

更新

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

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

更多的阅读

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

其他回答

定义:

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

消失:小部件不占用任何物理空间,完全消失。这可以使用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)…[ 文本(“早上好”), 文本('下午好'), 其他的…[ 文本(“晚上好”), 文本('晚安'), ), ), )

恕我直言,在Flutter中不需要可见性属性或特殊的小部件,因为如果你不需要显示小部件,就不要将其添加到小部件树中或将其替换为空小部件:

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

我认为能见度小部件存在的原因是因为很多人问:)人们习惯了由某些属性控制的元素的可见性

class VisibilityExample extends StatefulWidget {
  const VisibilityExample({Key? key}) : super(key: key);

  @override
  _VisibilityExampleState createState() => _VisibilityExampleState();
}

class _VisibilityExampleState extends State<VisibilityExample> {
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lines'),
      ),
      body: Container(
        color: Colors.black87,
        child: Stack(alignment: Alignment.bottomCenter, children: [
          ListView(
            shrinkWrap: true,
            children: [
              Container(
                height: 200,
              ),
              InkWell(
                onTap: () {},
                onHover: (value) {
                  print(value);
                  setState(() {
                    visible = !visible;
                  });
                },
                child: Visibility(
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                  visible: visible,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.arrow_left_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.add_circle_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.remove_circle,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.arrow_right_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(Icons.replay_circle_filled_outlined),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ]),
      ),
    );
  }
}
 

更新:因为这个答案是写的,可见性被引入,并提供了这个问题的最佳解决方案。


你可以在不透明度:为0.0的情况下使用不透明度来绘制隐藏的元素,但仍然占用空间。

为了使它不占用空间,将其替换为空Container()。

编辑: 要将它包装在不透明对象中,请执行以下操作:

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

谷歌开发者不透明度快速教程:https://youtu.be/9hltevOHQBw

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