如何更新数据存储在 firebase firestore 中的小部件的可见性？

Question

我试图显示两个列表，其数据是使用 stream 构建器从 firebase 火库更新的。 一个列表包含所有任务，另一个列表包含字段值为“taskStatus”的任务。 一切正常，我想添加这样的功能：当“已完成任务”列表中没有数据时，通过更改可见性小部件中可见参数的 state，整个小部件区域应该变得不可见。 下面是根据 firebase 的快照数据更改可见性的代码：

Expanded(
          child: StreamBuilder<List<Task>>(
              stream: DatabaseService().getCompletedTasks(orderName),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Loading();
                }
                List<Task>? completedTasks = snapshot.data;
                return Opacity(
                  opacity: snapshot.data!.isEmpty ? 0 : 1,
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 30, vertical: 20),
                          child: Text(
                            "Completed Tasks",
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.grey[700],
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          child: ListView.separated(
                            separatorBuilder: (context, index) =>
                                const SizedBox(
                              height: 5,
                            ),
                            itemCount: completedTasks!.length,
                            itemBuilder: (context, index) {
                              return Dismissible(
                                background: Container(
                                  color: Colors.red,
                                  child: const Align(
                                    alignment: Alignment.centerLeft,
                                    child: Padding(
                                      padding: EdgeInsets.all(15.0),
                                      child: Icon(
                                        Icons.delete,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                                secondaryBackground: Container(
                                  color: Colors.red,
                                  child: const Align(
                                    alignment: Alignment.centerRight,
                                    child: Padding(
                                      padding: EdgeInsets.all(15.0),
                                      child: Icon(
                                        Icons.delete,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                                key: UniqueKey(),
                                onDismissed: (direction) {
                                  DatabaseService()
                                      .deleteTask(completedTasks[index].id);
                                  AwesomeNotifications().cancelSchedule(
                                      completedTasks[index].id);
                                },
                                child: Item(
                                  task: completedTasks[index],
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),
        ),

要进行更改，我必须热重载应用程序。 那么，如何在不热重新加载应用程序的情况下更改它以更新可见性。

两个列表的完整代码：

body: Column(
      children: [
        Expanded(
          child: StreamBuilder<List<Task>>(
              stream: DatabaseService().getTasks(orderName),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Loading();
                }
                List<Task>? tasks = snapshot.data;
                if (snapshot.data!.isEmpty) {
                  return StreamBuilder(
                    stream: DatabaseService().getUniqueIDs(),
                    builder: (context, snapshot) =>
                        Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 30, vertical: 40),
                                child: Text(
                                  "Tasks",
                                  style: TextStyle(
                                    fontSize: 30,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.grey[700],
                                  ),
                                ),
                              ),
                            ),
                            Padding(
                              padding:
                              const EdgeInsets.symmetric(horizontal: 30),
                              child: Container(
                                alignment: Alignment.center,
                                child: const Text(
                                  "Great! You don't have any remaining tasks.",
                                  style: TextStyle(
                                    fontSize: 20,
                                    fontFamily: "Roboto",
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(
                              height: 40,
                            ),
                            Image(
                              image:
                              const AssetImage('assets/images/tasks.png'),
                              height: MediaQuery
                                  .of(context)
                                  .size
                                  .height * 0.3,
                            ),
                          ],
                        ),
                  );
                }
                return Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 30, vertical: 40),
                        child: Text(
                          "Tasks",
                          style: TextStyle(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey[700],
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        child: ListView.separated(
                          separatorBuilder: (context, index) =>
                          const SizedBox(
                            height: 5,
                          ),
                          itemCount: tasks!.length,
                          itemBuilder: (context, index) {
                            return Dismissible(
                              background: Container(
                                color: Colors.red,
                                child: const Align(
                                  alignment: Alignment.centerLeft,
                                  child: Padding(
                                    padding: EdgeInsets.all(15.0),
                                    child: Icon(
                                      Icons.delete,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                              secondaryBackground: Container(
                                color: Colors.red,
                                child: const Align(
                                  alignment: Alignment.centerRight,
                                  child: Padding(
                                    padding: EdgeInsets.all(15.0),
                                    child: Icon(
                                      Icons.delete,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                              key: UniqueKey(),
                              onDismissed: (direction) {
                                DatabaseService()
                                    .deleteTask(tasks[index].id);
                                AwesomeNotifications()
                                    .cancelSchedule(tasks[index].id);
                              },
                              child: Item(
                                task: tasks[index],
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                );
              }),
        ),
        Expanded(
          child: StreamBuilder<List<Task>>(
              stream: DatabaseService().getCompletedTasks(orderName),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Loading();
                }
                List<Task>? completedTasks = snapshot.data;
                return snapshot.data!.isEmpty ? SizedBox.shrink() : Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 30, vertical: 20),
                        child: Text(
                          "Completed Tasks",
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey[700],
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        child: ListView.separated(
                          separatorBuilder: (context, index) =>
                          const SizedBox(
                            height: 5,
                          ),
                          itemCount: completedTasks!.length,
                          itemBuilder: (context, index) {
                            return Dismissible(
                              background: Container(
                                color: Colors.red,
                                child: const Align(
                                  alignment: Alignment.centerLeft,
                                  child: Padding(
                                    padding: EdgeInsets.all(15.0),
                                    child: Icon(
                                      Icons.delete,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                              secondaryBackground: Container(
                                color: Colors.red,
                                child: const Align(
                                  alignment: Alignment.centerRight,
                                  child: Padding(
                                    padding: EdgeInsets.all(15.0),
                                    child: Icon(
                                      Icons.delete,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                              key: UniqueKey(),
                              onDismissed: (direction) {
                                DatabaseService()
                                    .deleteTask(completedTasks[index].id);
                                AwesomeNotifications().cancelSchedule(
                                    completedTasks[index].id);
                              },
                              child: Item(
                                task: completedTasks[index],
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],);
              }),
        ),
      ],
    ),

Answer 1

你不需要另一个参数，这样做：

retutn snapshot.data!.isEmpty ? SizedBox(): Column(
     children: [
       ...
      ],
)

或者如果你只想让它不可见，试试这个：

Opacity(
    opacity: snapshot.data!.isEmpty ? 0 : 1,
    child: Column(
       children: [
           ...
       ],
    ),
),

Answer 2

当您想在某个条件下隐藏或显示小部件时，无需使用空SizedBox() 。 代替SizedBox()使用SizedBox.shrink() ，它会占用尽可能小的空间并且比使用空SizedBox()更优化

return snapshot.data!.isEmpty ? SizedBox.shrink(): Column(
     children: [
       ...
      ],
)