Flutter控制組件顯示和隱藏三種方式詳解

Posted on by

方式一：if語句控制

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

方式二：Offstage組件

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

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

方式三： Visibility

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

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

Offstage和Visibility的區別：

1、Visibility 隱藏/可見，能保存組件的狀態；Offstage不能保存組件的狀態，組件重新加載。

2、當Offstage不可見（true）的時候，如果child有動畫等，需要手動停掉，Offstage並不會停掉動畫等操作。

3、Offstage隱藏時不占空間，Visibility可以設置隱藏時占據空間也可以不占據空間，默認不隱藏時不占據空間

備註：Visibility隱藏時占據空間如下：

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

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

以上就是Flutter控制組件顯示和隱藏三種方式詳解的詳細內容，更多關於Flutter控制組件顯示隱藏的資料請關註WalkonNet其它相關文章！

推薦閱讀：