Flutter中顯示條件Widget的實現(xiàn)方式
Flutter 中如何顯示條件 Widget
1. 場景:
在 Flutter 日常開發(fā)中經(jīng)常會遇見這樣的需求,如: 只有用戶是 VIP 時,才能展示某個入口或者某個模塊。這樣的需求在開發(fā)業(yè)務(wù)需求中多如牛毛,那你是如何來優(yōu)雅的實現(xiàn)的呢?
2. 推薦實現(xiàn)方式
下面是本人在開發(fā)中常用的集中實現(xiàn)方式,博友們可以根據(jù)自己的業(yè)務(wù)需求可以參考。
if 形式
這是一種非常常見的形式,滿足條件就實現(xiàn) Widget。示例如下:
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), if (_counter > 2) Container( width: 100, height: 100, color: Colors.red, ) ], ),
注意: 在 if 后面不能使用大括號 ({})。 錯誤指示如下:
if-else 形式
這也是一種常見的形式,滿足條件顯示 Widget1 ;不滿足條件顯示 Widget2 。示例如下:
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), if (_counter > 2) Container( width: 100, height: 100, color: Colors.red, ) else Container( width: 100, height: 100, color: Colors.green, ) ], )
注意: 在 if-else 后面不能使用大括號 ({}); if 下的組件件的后面不能使用逗號(,)。 錯誤寫法示例:
if...[widget1,widget2] 形式
該種形式也是常用于業(yè)務(wù)開發(fā),它是當條件成立時,顯示多個 Widget。 示例如下:
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), if (_counter > 2) ...[ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 100, height: 100, color: Colors.green, ) ], ], )
if...[widget1,widget2] else...[widget3,widget4] 形式
該種形式也是常用于業(yè)務(wù)開發(fā),它是當條件成立時,顯示多個 Widget;條件不成立時,顯示多個 Widget。 示例如下:
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), if (_counter > 2) ...[ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 100, height: 100, color: Colors.green, ) ] else ...[ Container( width: 100, height: 100, color: Colors.pinkAccent, ), Container( width: 100, height: 100, color: Colors.yellow, ), ] ], )
注意: if 下的組件集合的后面不能使用逗號(,)。 錯誤寫法示例:
函數(shù)形式
這種形式是將這一塊的邏輯抽離到另一個地方。該方法有個不足之處,那就是在不滿足條件時也要返回一個 Widget。 示例如下:
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), getWidget1(), ], ) // 函數(shù)形式 Widget getWidget1() { if (_counter > 2) { return Container( width: 100, height: 100, color: Colors.green, ); } else { return Container( width: 100, height: 100, color: Colors.pinkAccent, ); } } }
3. 總結(jié)
以上就是 Flutter 如何顯示條件 Widget 的方式。其實還有其他的方法,例如 switch 。這些其他的方法我們在后續(xù)文章中介紹。
以上就是Flutter中顯示條件Widget的實現(xiàn)方式的詳細內(nèi)容,更多關(guān)于Flutter顯示W(wǎng)idget的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android Jetpack組件之ViewModel使用詳解
Android中的ViewModel是一個可以用來存儲UI相關(guān)的數(shù)據(jù)的類。ViewModel的生命周期會比創(chuàng)建它的Activity、Fragment的生命周期長,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04android 上傳aar到私有maven服務(wù)器的示例
這篇文章主要介紹了android 上傳aar到私有maven服務(wù)器,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Android自定義Chronometer實現(xiàn)短信驗證碼秒表倒計時功能
這篇文章主要介紹了Android自定義ChronometerView實現(xiàn)類似秒表倒計時,短信驗證碼倒計時功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11Android開發(fā)實戰(zhàn)之漂亮的ViewPager引導(dǎo)頁
這篇文章主要介紹了Android開發(fā)實戰(zhàn)中漂亮ViewPager引導(dǎo)頁的制作過程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法
這篇文章主要介紹了Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法,有需要的朋友可以參考一下2014-01-01Android RecyclerView加載不同布局簡單實現(xiàn)
這篇文章主要為大家詳細介紹了Android RecyclerView加載不同布局簡單實現(xiàn),感興趣的小伙伴們可以參考一下2016-08-08