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

最新推荐文章于 2024-11-02 11:33:21 发布

chinaherolts2008

最新推荐文章于 2024-11-02 11:33:21 发布

阅读量30

点赞数

文章标签： flutter javascript 前端

原文链接：https://juejin.cn/post/7353547774174445583

版权

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

Flutter 中如何显示条件 Widget

场景:
在 Flutter 日常开发中经常会遇见这样的需求，如: 只有用户是 VIP 时，才能展示某个入口或者某个模块。这样的需求在开发业务需求中多如牛毛，那你是如何来优雅的实现的呢？
推荐实现方式
下面是本人在开发中常用的集中实现方式，博友们可以根据自己的业务需求可以参考。

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,
      );
    }
  }
}