徽章上的三元运算符仅在有新消息时显示徽章

Question

可能是一个简单的问题。

我尝试仅在有未读消息时才在聊天屏幕上显示徽章图标。

徽章的默认数量已设置为“0”。

如何编写三元运算符，使其在没有未读消息时甚至不出现，而仅在至少有一条未读消息时出现？

我遇到的问题是，即使未读消息为零（嵌入在以下 link 中），徽章也会出现：

 new Container(
                margin: new EdgeInsets.symmetric(horizontal: 5.0),
                child: new InkWell(
                    child: new Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                      new Badge(
                          badgeColor: Colors.green[300],
                          badgeContent: Padding(
                            padding: const EdgeInsets.only(left: 3.0, right: 3),
                            child: Text('${badges ?? ''}' == 0
                                ? ''
                                : '${badges ?? ''}'),
                          ))
                    ]))),

Answer 1

badges > 0
? new Container(
    margin: new EdgeInsets.symmetric(horizontal: 5.0),
    child: new InkWell(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Badge(
            badgeColor: Colors.green[300],
            badgeContent: Padding(
              padding: const EdgeInsets.only(left: 3.0, right: 3),
              child: Text('$badges'),
            ),
          ),
        ],
      ),
    ),
  ),
: CustomWidget() //Return what you want here

您可以嵌套三元运算符以将条件放在更深的小部件上。

Answer 2

基本上你有一个逻辑来检查徽章是否等于“0”然后 return 一个空白容器

children: <Widget>[
   (badges == '0') ? Container() : Badge( ... ),
]

Answer 3

(badges == null) 
? new Container(
    margin: new EdgeInsets.symmetric(horizontal: 5.0),
    child: new InkWell(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Badge(
            badgeColor: Colors.green[300],
            badgeContent: Padding(
              padding: const EdgeInsets.only(left: 3.0, right: 3),
              child: Text('$badges'),
            ),
          ),
        ],
      ),
    ),
  ),
: CustomWidget()

成功了。谢谢。

badge 在上面被初始化为 0 的 int

徽章上的三元运算符仅在有新消息时显示徽章

Ternary Operator on badges to reveal badges only when there is a new message

ternary-operator

dart

flutter