Visibility Widget介紹

• Opacity Widget
• • • 構(gòu)造函數(shù)說(shuō)明
• Offstage Widget
• • • 構(gòu)造函數(shù)
• Visibility Widget
• • • 構(gòu)造函數(shù)
• 其他隱藏控件的方式

Opacity Widget

一個(gè)可以讓子控件透明度發(fā)生變化的控件.

構(gòu)造函數(shù)說(shuō)明

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

• opacity:設(shè)置透明度,當(dāng)設(shè)置為0時(shí),子控件不可見(jiàn),在屏幕上不占用空間,但是仍然在Widget Tree中.
  當(dāng)opacity的值不在[0,1]之間,子控件先會(huì)繪制到緩沖區(qū),然后在繪制到屏幕.

• alwaysIncludeSemantics:當(dāng)該值設(shè)置為true,并且opacity=0時(shí),雖然子控件不可見(jiàn),但是在屏幕上會(huì)占用子控件大小的空間.

  當(dāng)[Image]、[Color]使用Opacity設(shè)置透明度在[0,1]之間時(shí),使用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

可以控制子控件是否顯示

構(gòu)造函數(shù)

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

• offstage: 當(dāng)offstage=false,子控件(child)可見(jiàn);
  當(dāng)offstaged=true是,子控件不可見(jiàn);子控件在Widget Tree,不進(jìn)行繪制,不會(huì)命中測(cè)試;也不占用空間;子控件仍處于active狀態(tài);子控件動(dòng)畫(huà)仍在進(jìn)行,所以子控件有動(dòng)畫(huà)時(shí),需要手動(dòng)停止掉動(dòng)畫(huà);

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

Visibility Widget

控制子控件是否可見(jiàn)

構(gòu)造函數(shù)

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:子控件可見(jiàn),繪制到屏幕上; false時(shí),子控件不可見(jiàn),并且不在屏幕上占用一定的空間,此時(shí)會(huì)使用replacement替換child,實(shí)際繪制的Widget就是replacement,默認(rèn)replasement時(shí)寬高為0的SizedBox.
• maintainState:當(dāng)visible=false時(shí),是否保存子控件的狀態(tài).當(dāng)為true時(shí),子空間會(huì)在Widget Tree中存在,不占用屏幕 的空間,其實(shí)際在子child增加了Offstage等一些父控件.
• maintainSize:是否為子控件所在的位置保留空間.當(dāng)maintainSize=true[maintainState、maintainAnimation]時(shí),[]子控件不可見(jiàn),但是其所在位置占用的空間存在.在Visibility和子控件之間增加了Opacity.

其他隱藏控件的方式

當(dāng)一個(gè)控件在狀態(tài)改變時(shí),不需要進(jìn)行繪制,可以一動(dòng)態(tài)的方式?jīng)Q定是否將控件添加到Widget Tree中.
比如當(dāng)一個(gè)控件在需要時(shí),才添加到控件,否則不添加;

///按需將控件添加到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,],);}

總結(jié)

以上是生活随笔為你收集整理的Flutter Visibility Widget的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。