Flutter中显示条件Widget的实现方式

 更新时间:2024年04月09日 11:41:19   作者:半醉看夕阳  
在 Flutter 日常开发中经常会遇见这样的需求,如: 只有用户是 VIP 时,才能展示某个入口或者某个模块,这样的需求在开发业务需求中多如牛毛,那你是如何来优雅的实现的呢,本文将给大家介绍Flutter中显示条件Widget的实现方式,需要的朋友可以参考下

Flutter 中如何显示条件 Widget

1. 场景:

Flutter 日常开发中经常会遇见这样的需求,如: 只有用户是 VIP 时,才能展示某个入口或者某个模块。这样的需求在开发业务需求中多如牛毛,那你是如何来优雅的实现的呢?

2. 推荐实现方式

下面是本人在开发中常用的集中实现方式,博友们可以根据自己的业务需求可以参考。

if 形式

这是一种非常常见的形式,满足条件就实现 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] 形式

该种形式也是常用于业务开发,它是当条件成立时,显示多个 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] 形式

该种形式也是常用于业务开发,它是当条件成立时,显示多个 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 下的组件集合的后面不能使用逗号(,)。 错误写法示例:

函数形式

这种形式是将这一块的逻辑抽离到另一个地方。该方法有个不足之处,那就是在不满足条件时也要返回一个 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(),
  ],
)

// 函数形式
  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. 总结

以上就是 Flutter 如何显示条件 Widget 的方式。其实还有其他的方法,例如 switch 。这些其他的方法我们在后续文章中介绍。

以上就是Flutter中显示条件Widget的实现方式的详细内容,更多关于Flutter显示Widget的资料请关注脚本之家其它相关文章!

相关文章

  • ViewPager 滑动一半的判断方法以及左滑右滑判断实例

    ViewPager 滑动一半的判断方法以及左滑右滑判断实例

    下面小编就为大家带来一篇ViewPager 滑动一半的判断方法以及左滑右滑判断实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 简单实现Android闹钟程序 附源码

    简单实现Android闹钟程序 附源码

    这篇文章主要帮助大家简单实现Android闹钟程序,附源码下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Android隐藏标题栏及解决启动闪过标题的实例详解

    Android隐藏标题栏及解决启动闪过标题的实例详解

    这篇文章主要介绍了Android隐藏标题栏及解决启动闪过标题的实例详解的相关资料,这里提供两种方法帮助大家解决这种问题,需要的朋友可以参考下
    2017-09-09
  • Kotlin by关键字作用及使用介绍

    Kotlin by关键字作用及使用介绍

    Kotlin 中的 by 关键字在 Java 中是没有的,这使我对它感到非常陌生。Kotlin 中为什么要新增 by 关键字呢?by 关键字在 Kotlin 中是如何使用的?本文会介绍 by 关键字的使用分类,具体的示例,Kotlin 内置的 by 使用,希望能够帮助到大家
    2022-10-10
  • Android实现短信、微信、微博分享功能

    Android实现短信、微信、微博分享功能

    微信、微博分享功能大家都体验过吧,非常方便我们的生活,下面通过本文给大家介绍Android实现短信、微信、微博分享功能,需要的朋友参考下吧
    2017-12-12
  • Android使用Gridview单行横向滚动显示

    Android使用Gridview单行横向滚动显示

    这篇文章主要为大家详细介绍了Android使用Gridview单行横向滚动显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android中的广播(BroadCast)详细介绍

    Android中的广播(BroadCast)详细介绍

    这篇文章主要介绍了Android中的广播(BroadCast)详细介绍,本文讲解了什么是广播、广播有什么用、实现广播、动态注册方式、配置文件方式等内容,需要的朋友可以参考下
    2015-03-03
  • Android N获取外置SD卡或挂载U盘路径的方法

    Android N获取外置SD卡或挂载U盘路径的方法

    今天小编就为大家分享一篇Android N获取外置SD卡或挂载U盘路径的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Kotlin定义其他类的实现详解

    Kotlin定义其他类的实现详解

    这篇文章主要介绍了Kotlin定义其他类的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • Android  ActionBar控件操作使用详解

    Android  ActionBar控件操作使用详解

    这篇文章主要介绍了Android  ActionBar控件操作使用,ActionBar是Android常用的导航控件,位于activity的顶部,用于显示标题,导航icon和actions等等
    2023-04-04

最新评论