欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter中顯示條件Widget的實現(xiàn)方式

 更新時間:2024年04月09日 11:41:19   作者:半醉看夕陽  
在 Flutter 日常開發(fā)中經(jīng)常會遇見這樣的需求,如: 只有用戶是 VIP 時,才能展示某個入口或者某個模塊,這樣的需求在開發(fā)業(yè)務(wù)需求中多如牛毛,那你是如何來優(yōu)雅的實現(xiàn)的呢,本文將給大家介紹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)文章

最新評論