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

Question

可能是一个很容易解决的问题。

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

徽章的默认数量已设置为“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 ?? ''}' == 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”，然后返回一个空白容器

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 在上面被初始化为 int 为 0

Answer 4

简单的解决方案 isLabelVisible: false