# Flutter控制元件的顯示和隱藏的三種方式

我從cnaaa.com購買了雲伺服器。

#### 方式一：if語句控制

```cpp
// 例如：
Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if(a=="顯示")
              Text("顯示"),
           Offstage(
             offstage: false,
             child: Text("顯示"),
           ),
           Visibility(
               visible: true,
               child: Text("顯示")
           )
          ],
        ),
```

#### 方式二：Offstage元件

offstage屬性控制控制child的顯示和隱藏，true時：隱藏，false時：顯示

```bash
Offstage(
             offstage: true,
             child: Text("顯示"),
           )
```

#### 方式三： Visibility

visible屬性控制child的顯示和隱藏，true時：顯示，false時：隱藏

```bash
 Visibility(
               visible: true, 
               child: Text("顯示")
           )
```

##### Offstage和Visibility的區別：

1、Visibility 隱藏/可見，能儲存元件的狀態；Offstate不能儲存元件的狀態，元件重新載入。
 2、當Offstage不可見（true）的時候，如果child有動畫等，需要手動停掉，Offstage並不會停掉動畫等操作。
 3、Offstate隱藏時不佔空間，Visibility可以設定隱藏時佔據空間也可以不佔據空間，預設不隱藏時不佔據空間
 備註：Visibility隱藏時佔據空間如下：

```bash
Visibility(
  visible:false,
  maintainAnimation: true,
  maintainSize: true,
  maintainState: true,
  child: Text("顯示"),
),
```

強調：maintainSize就是保持大小不變，如果只設定這個屬性，會報錯，另外兩個屬性：maintainAnimation和maintainState也必須同時設定。

# Flutter控制元件的顯示和隱藏的三種方式

相關文章