如果DatePicker选择的日期为空日程，如何在ListView.builder()中放置lottie动画或return语句

Question

我还是颤振的新手，我需要一些帮助。目前，我可以从 Firebase Firestone 获取 ListView，该 ListView 基于用户单击时 DatePicker 的选定日期（图 1），并且我想显示一些 Lottie 动画，指示没有任何计划的选定日期没有可用数据但我无法也不知道放置退货声明。如果我用乐蒂动画替换 return Container()，它将在每个日期显示，尽管该日期有时间表（图 2），并且乐蒂的数量将根据重复的列表长度显示。任何人，请帮助我。感谢这些帮助，谢谢。

代码：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TaskController controller = Get.put(TaskController());
  DateTime selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(),
      body: Column(
        children: [
          addTaskBar(),
          addDateBar(),
          const SizedBox(height: 10.0),
          GetX<TaskController>(
            init: Get.put<TaskController>(TaskController()),
            builder: (controller) {
              return Expanded(
                  child: ListView.builder(
                      itemCount: controller.tasks.length,
                      itemBuilder: (context, index) {
                        print('${controller.tasks[index].note} +1');
                        final _task = controller.tasks[index];
                        if (_task.repeat == 'Daily' ||
                            _task.date ==
                                DateFormat.yMd().format(selectedDate) ||
                            _task.repeat == 'Weekly' &&
                                selectedDate
                                            .difference(DateFormat.yMd()
                                                .parse(_task.date!))
                                            .inDays %
                                        7 ==
                                    0 ||
                            _task.repeat == 'Monthly' &&
                                DateFormat.yMd().parse(_task.date!).day == selectedDate.day) {
                          return Container(
                            margin: const EdgeInsets.symmetric(
                              horizontal: 20,
                              vertical: 10,
                            ),
                            decoration: BoxDecoration(
                              color: _getBGClr(_task.color!),                              
                              borderRadius: BorderRadius.circular(20),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Row(
                                children: [
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          _task.title!,
                                          style: GoogleFonts.lato(
                                              textStyle: const TextStyle(
                                                  fontSize: 16,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.white)),
                                        ),
                                        const SizedBox(height: 12),
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            const Icon(
                                              Icons.access_alarm_rounded,
                                              color: Colors.black,
                                              size: 18,
                                            ),
                                            const SizedBox(width: 2),
                                            Text(
                                              '${_task.startTime!} - ${_task.endTime!}',
                                              style: GoogleFonts.lato(
                                                  textStyle: const TextStyle(
                                                      fontSize: 16,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Colors.white)),
                                            ),
                                          ],
                                        ),
                                        const SizedBox(height: 12),
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Text(
                                              _task.note!,
                                              style: GoogleFonts.lato(
                                                textStyle: const TextStyle(
                                                  fontSize: 15,
                                                  color: Colors.white,
                                                  fontWeight: FontWeight.bold,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                  IconButton(
                                    onPressed: () {
                                      Navigator.of(context).push(
                                        MaterialPageRoute(
                                          builder: (context) =>
                                              UpdatingTaskPage(
                                            id: _task.id!,
                                            title: _task.title!,
                                            note: _task.note!,
                                            isCompleted: false,
                                            date: _task.date!,
                                            startTime: _task.startTime!,
                                            endTime: _task.endTime!,
                                            color: _task.color!,
                                            remind: _task.remind!,
                                            repeat: _task.repeat!,
                                          ),
                                        ),
                                      );
                                    },
                                    icon: const Icon(Icons.edit_note),
                                  ),
                                  IconButton(
                                    onPressed: () {
                                      FirestoreDB.deleteTask(_task.id!);
                                    },
                                    icon: const Icon(
                                      Icons.delete,
                                      color: Colors.grey,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        }
                        return Container(); // here is not suitable to placed 
                      } 
                      ));
            },
          ),
        ],
      ),
    );
  }

  Container addDateBar() {
    return Container(
      margin: const EdgeInsets.only(top: 20, left: 20),
      child: DatePicker(
        DateTime.now().subtract(const Duration(days: 2)),
        height: 100,
        width: 80,
        initialSelectedDate: DateTime.now(),
        selectionColor: primaryClr, //background colour
        selectedTextColor: Colors.white,
        dateTextStyle: GoogleFonts.lato(
          textStyle: const TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            color: Colors.grey,
          ),
        ),
        dayTextStyle: GoogleFonts.lato(
          textStyle: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
            color: Colors.grey,
          ),
        ),
        monthTextStyle: GoogleFonts.lato(
          textStyle: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: Colors.grey,
          ),
        ),
        onDateChange: (date) {
          setState(() {
            selectedDate = date;
          });
        },
      ),
    );
  }


}

Answer 1

您可以做的是询问列表的长度是否为空，然后显示lottie小部件，否则返回您的实际代码，如下所示。

child: ListView.builder(
                  itemCount: controller.tasks.length,
                  itemBuilder: (context, index) {
                    controller.tasks.isEmpty ? 
                       Lottie.asset('path of your asset'): 
                       yourCodeforTasks;

Answer 2

您需要检查

GetX<TaskController>

的构建器中是否有所选日期的可用时间表，并将结果存储在 bool 中，并相应地返回

ListView.builder

或

Lottie

。

      GetX<TaskController>(
        init: Get.put<TaskController>(TaskController()),
        builder: (controller) {
          bool noDataForSelectedDate = true;

          /// do the comparisons
          /// check that the [selectedDate] has schedules or not
          /// assign [noDataForSelectedDate] to false if that date has some schedules.
          return Expanded(
              child: noDataForSelectedDate
                  ? Center(
                      child: Lottie.asset(
                          // lottie asset
                          ),
                    )
                  : ListView.builder(
                      itemCount: controller.tasks.length,
                      itemBuilder: (context, index) {
                        // list items
                      }));
        },
      ),

我不知道您的 GetX 构建器的控制器中有什么以及它如何管理日程安排日期和持续时间，因此您需要自行考虑登录以检查是否有所选日期的日程安排。

我可以告诉你

List

的高阶函数（例如 forEach、where 和 map）对此很有帮助。

如果您需要任何其他帮助，请告诉我。