开发者

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

开发者 https://www.devze.com 2024-08-10 10:57 出处:网络 作者: 半醉看夕阳
目录Flutter 中如何显示条件 Widget1. 场景:2. 推荐实现方式if 形式if-else 形式if...[widget1,widget2] 形式if...[widget1,widget2] else...[widget3,widget4] 形式函数形式3. 总结Flutter 中如何显示条件 Widget
目录
  • Flutter 中如何显示条件 Widget
    • 1. 场景:
    • 2. 推荐实现方式
      • if 形式
      • if-else 形式
      • if...[widget1,widget2] 形式
      • if...[widget1,widget2] else...[widget3,widget4] 形式
      • 函数形式
    • 3. 总结

    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(
    js      '$_counter',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        if (_counter > 2)
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          )
      ],
    ),
    

    注意: 在 if 后面不能使用大括号 ({})。 错误指示如下:

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

    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 编程下的组件件的后面不能使用逗号(,)。 错误写法示例:

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

    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] 形式

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

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

    函数形式

    这种形式是将这一块的逻辑抽离到另一个地方。该方法有个不足之处,那就是在不满足条件时也要返回一个 Widget。 示例如下:

    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text(
          'You hawww.devze.comve pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        getWidget1(),
      ],
    )
    
    // 函数形式
      Widget gewww.devze.comtWidget1() {
        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的资料请关注编程客栈(www.devze.com)其它相关文章!

    0

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    关注公众号