Question

在html CSS中，#gone是否具有display: none;浏览器将具有不同的显示

    .main {
        display: flex;
        justify-content:space-between;
    }
    #gone {
        visibility: hidden;
        /* display: none; */
    }
    <div class="main">
        <div>text 1</div>
        <div id="gone">text 1</div>
        <div>text 1</div>
        <div>text 1</div>
    </div>

With display:none

Without display:none

在扑朔迷离中，使用Visibility with visible: false会像Without display:none 一样效果

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Visibility(
          visible: false,
          child: Text("test1",
            style: TextStyle(fontSize: 10),
          ),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
      ],
    );

如何在抖动中获得类似With display:none 的效果？英语很差：-（

Answer 1

您不仅可以在视觉上隐藏小部件，还可以显示一个大小为0的空容器，如下所示：

bool hide = true;
return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        hide==true?Container():Visibility(
          visible: false,
          child: Text("test1",
            style: TextStyle(fontSize: 10),
          ),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
      ],
    );

在此示例中，如果变量“ hide”为true，则将显示一个空容器，而当变量“ hide”为false时，将显示不可见的文本。

Answer 2

您必须从mainAxisAlignment中删除Row属性，然后自己处理间距：

return Row(
  children: <Widget>[
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
    Spacer(),
    Visibility(
      visible: false,
      child: Flexible(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              "test1",
              style: TextStyle(fontSize: 10),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
    Spacer(),
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
  ],
);

颤振-如何获得类似CSS Flex的效果无显示

2 个答案: