如何从流构建器中隐藏单个项目

Question

您好，我有一个流生成器，它列出了带有倒计时按钮的容器，当计数器达到零时，我想从列表中隐藏该单个容器，但我不知道该怎么做，如果有人这样做，请帮忙

bool visibility = true;

  Widget _dataList() {
    if (data != null) {
      return StreamBuilder(
          stream: data,
          builder: (context, snapshot) {
            return ListView.builder(
              itemCount: snapshot.data.documents.length,
              padding: EdgeInsets.all(5.0),
              itemBuilder: (context, i) {
                return visibility == true
                    ? new Container(
                        child: Padding(
                            padding: EdgeInsets.only(top: 5, right: 5, left: 5),
                            child: Material(
                              borderRadius: BorderRadius.circular(20),
                              elevation: 9,
                              color:
                                  Theme.of(context).cardColor.withOpacity(.95),
                              shadowColor:
                                  Theme.of(context).accentColor.withOpacity(.5),
                              child: Container(
                                padding: EdgeInsets.only(
                                    bottom: 10, right: 10, left: 10, top: 15),
                                height: 210,
                                decoration: BoxDecoration(
                                    color: Color(0xFF0B0F1B),
                                    borderRadius: BorderRadius.circular(20),
                                    border: Border.all(
                                        width: 1,
                                        color: Colors.grey.withOpacity(0.5))),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    
                                    Padding(
                                      padding: const EdgeInsets.all(4.0),
                                      child: Text(
                                        'Number Of Participants :-' +
                                            snapshot.data.documents[i]
                                                .data['numberOfParticipants'],
                                        style: TextStyle(
                                            color: Colors.white, fontSize: 15),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(top: 7.0),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          SizedBox(
                                            height: 40,
                                          ),
                                          Material(
                                            borderRadius:
                                                BorderRadius.circular(20),
                                            elevation: 26,
                                            color: Color(0xFF0B0F1B),
                                            child: Container(
                                              height: 30,
                                              width: 120,
                                              decoration: BoxDecoration(
                                                  color: Color(0xFF0B0F1B),
                                                  borderRadius:
                                                      BorderRadius.circular(20),
                                                  border: Border.all(
                                                      width: 1,
                                                      color: Colors.grey
                                                          .withOpacity(0.5))),
                                              child: InkWell(
                                                splashColor: Colors.redAccent,
                                                borderRadius:
                                                    BorderRadius.circular(20),
                                                child: Center(
                                                    child: Text(
                                                  'View',
                                                  style: TextStyle(
                                                      color: Color(0xFFC77AF3),
                                                      fontSize: 18),
                                                )),
                                                onTap: () {
                                                  int currentval = int.parse(
                                                      snapshot.data.documents[i]
                                                              .data[
                                                          'numberOfParticipants']);
                                                  setState(
                                                    () {
                                                      currentval--;
                                                      snapshot.data.documents[i]
                                                                  .data[
                                                              'numberOfParticipants'] =
                                                          currentval.toString();
                                                      if (currentval == 0) {
                                                        visibility = false;
                                                      }
                                                    },
                                                  );
                                                },
                                              ),
                                            ),
                                          ),
                                          SizedBox(
                                            width: 85,
                                          ),
                                          Material(
                                            borderRadius:
                                                BorderRadius.circular(20),
                                            elevation: 26,
                                            color: Color(0xFF0B0F1B),
                                            child: Container(
                                              height: 30,
                                              width: 120,
                                              decoration: BoxDecoration(
                                                  color: Color(0xFF0B0F1B),
                                                  borderRadius:
                                                      BorderRadius.circular(20),
                                                  border: Border.all(
                                                      width: 1,
                                                      color: Colors.grey
                                                          .withOpacity(0.5))),
                                              child: InkWell(
                                                splashColor: Colors.greenAccent,
                                                borderRadius:
                                                    BorderRadius.circular(20),
                                                child: Center(
                                                    child: Text(
                                                  'Join',
                                                  style: TextStyle(
                                                      color: Colors.greenAccent,
                                                      fontSize: 18),
                                                )),
                                                onTap: () {
                                                  setState(
                                                    () {},
                                                  );
                                                },
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                         ),
                      )
                    : new Container();
              },
            );
          });
    } else {
      return Center(child: Text('Nothing yet'));
    }
  }

这是我的代码，我试图通过一个空容器来实现可见性，因为我不希望它占有一席之地，但问题是它隐藏了所有其他容器，整个列表变得不可见

Answer 1

您可以使用 Opacity 和 opacity: 为 0.0 来绘制隐藏元素但仍占据空间。

为了不占空间，换成空的Container()。

编辑：要将其包装在 Opacity 对象中，请执行以下操作：

 new Opacity(opacity: 0.0, child: new Padding(
      padding: const EdgeInsets.only(
        left: 16.0,
      ),
      child: new Icon(pencil, color: CupertinoColors.activeBlue),
    ))

Google Developers 关于不透明度的快速教程：https://youtu.be/9hltevOHQBw

你也可以试试

Visibility(
      visible: false,
      child: child
      )
    );