Visibility Widget介紹

• Opacity Widget
• • • 構造函數說明
• Offstage Widget
• • • 構造函數
• Visibility Widget
• • • 構造函數
• 其他隱藏控件的方式

Opacity Widget

一個可以讓子控件透明度發生變化的控件.

構造函數說明

const Opacity({Key? key,required this.opacity,//透明度,this.alwaysIncludeSemantics = false,Widget? child,})

• opacity:設置透明度,當設置為0時,子控件不可見,在屏幕上不占用空間,但是仍然在Widget Tree中.
  當opacity的值不在[0,1]之間,子控件先會繪制到緩沖區,然后在繪制到屏幕.

• alwaysIncludeSemantics:當該值設置為true,并且opacity=0時,雖然子控件不可見,但是在屏幕上會占用子控件大小的空間.

  當[Image]、[Color]使用Opacity設置透明度在[0,1]之間時,使用Image\Color更高效.

//方案一Opacity(opacity: 0.5,child: Container(color: Color.fromRGBO(0, 0, 255, 1),width: 60,height: 60,),)//方案二 更高效,切效果和方案一一樣Container(color: Color.fromRGBO(0, 0, 255, 0.5),width: 60,height: 60,)

Offstage Widget

可以控制子控件是否顯示

構造函數

const Offstage({ Key? key, this.offstage = true, Widget? child })

• offstage: 當offstage=false,子控件(child)可見;
  當offstaged=true是,子控件不可見;子控件在Widget Tree,不進行繪制,不會命中測試;也不占用空間;子控件仍處于active狀態;子控件動畫仍在進行,所以子控件有動畫時,需要手動停止掉動畫;

Offstage(offstage: false,child: GestureDetector(onTap: () {print("**** on pressed ***");},child: Container(width: 60,height: 60,color: Colors.deepPurple,),),)

Visibility Widget

控制子控件是否可見

構造函數

const Visibility({Key? key,required this.child,this.replacement = const SizedBox.shrink(),this.visible = true,this.maintainState = false,this.maintainAnimation = false,this.maintainSize = false,this.maintainSemantics = false,this.maintainInteractivity = false,})

• visible:,true:子控件可見,繪制到屏幕上; false時,子控件不可見,并且不在屏幕上占用一定的空間,此時會使用replacement替換child,實際繪制的Widget就是replacement,默認replasement時寬高為0的SizedBox.
• maintainState:當visible=false時,是否保存子控件的狀態.當為true時,子空間會在Widget Tree中存在,不占用屏幕 的空間,其實際在子child增加了Offstage等一些父控件.
• maintainSize:是否為子控件所在的位置保留空間.當maintainSize=true[maintainState、maintainAnimation]時,[]子控件不可見,但是其所在位置占用的空間存在.在Visibility和子控件之間增加了Opacity.

其他隱藏控件的方式

當一個控件在狀態改變時,不需要進行繪制,可以一動態的方式決定是否將控件添加到Widget Tree中.
比如當一個控件在需要時,才添加到控件,否則不添加;

///按需將控件添加到Widget Tree @overrideWidget build(BuildContext context) {Widget child1 = Container(width: 100,height: 100,color: Colors.green,);Widget child2 = Container(width: 100,height: 100,color: Colors.blue,);return Row(children: [if(newer)child2,newer ? child2 : child1,],);}

總結

以上是生活随笔為你收集整理的Flutter Visibility Widget的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。