当没有其他卡片显示时显示一张卡片答案

【问题标题】：Showing one card in flutter when no other cards are displaying当没有其他卡片显示时显示一张卡片
【发布时间】：2021-02-26 18:52:12
【问题描述】：

我有一组连接到我的云燃烧的卡片，这些卡显示了何时选择与每张卡相关的图标。但是，我想要一张卡片，告诉用户在没有其他卡片显示时选择一个图标。这是我的代码：

class Tips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream:
                FirebaseFirestore.instance.collection('moodIcons').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return Text('Loading data... Please Wait');

              var currentCards = 0;

              return Container(
                  child: new ListView(
                    children: snapshot.data.documents.map<Widget>((DocumentSnapshot document) {
                      if (document.data()['display'] == true) {
                          //code to display each card when specific icon is chosen
                      } else {
                        if (currentCards < 1) {
                          currentCards++;
                          return new Card(
                              child: new Column(
                                children: <Widget>[
                                  new Container(
                                    width: 400.0,
                                    height: 45.0,
                                    child: new Text(
                                      "Choose an icon to show a tip!",
                                  ),
                                ],
                              ));

目前，卡片一直显示，但我希望它在单击图标时消失。单击图标时，display 的值变为 true。我尝试使用一个计数器，如果display 的值为真，那么它将向计数器加一，然后如果计数器大于0，则else 语句中的卡将不会显示。但是，这不起作用，因为我无法从 if 语句中返回计数器的值。任何帮助将不胜感激！

【问题讨论】：

标签： flutter dart

【解决方案1】：

如果没有将document 设置为display: true，您可以有条件地在ListView 的开头添加一个项目：

class Tips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('moodIcons').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return Text('Loading data... Please Wait');
          return Container(
            child: new ListView(children: [
              if (!snapshot.data.documents
                  .any((doc) => doc.data()['display'] == true))
                Card(child: Text("Choose an icon to show a tip!")),
              ...snapshot.data.documents
                  .where((doc) => doc.data()['display'] == true)
                  .map((doc) => MyWidget(doc))
                  .toList(),
            ]),
          );
        },
      ),
    );
  }
}

【讨论】：

非常感谢！我刚刚使用了if (!snapshot.data.documents.any((doc) => doc.data()['display'] == true))，效果很好！

【解决方案2】：

如果您希望这由StatelessWidget 完成，您需要一些状态管理，例如Bloc 或Riverpod，您自己的等。一个很好的答案here 单击图标时，您需要抽象流并创建事件/动作。该事件将通过上述方法处理。新卡将被推送到流中。

或者您可以将小部件设为Stateful，创建Card 小部件列表（以提供给您的列表构建器）并使用setState 将元素添加到Card 到列表中。

【讨论】：