首页 > 解决方案 > 如何根据 Flutter 中来自服务器的 List 更改 modalBottomSheet 的状态?

问题描述

在此处输入图像描述

我有一个 modalBottomSheet,它显示了两个 CupertinoPicker,一个是日期选择器,另一个是小时选择器。I want to reach this effect: when date is changed in the picker, I send a request to server to check if there are available hours on that date, if yes, the picker on the right should show only those hours which are available, if没有可用的时间,它应该显示一个文本。我尝试使用 StatefulBuilder 来设置 modalBottomSheet 的状态,但是一旦列表变为空,它就不会填满,并且显示的时间不是我现在所在日期的时间,而是前一个时间。

  showUniversalPicker() {
    _selectedTime = 'ВСЕ';
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (
              BuildContext context,
              StateSetter setSheetState,
            ) {
              return Container(
                height: 300,
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        CupertinoButton(
                          child: Text(
                            'Отменить',
                            style: TextStyle(color: Colors.grey),
                          ),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                        Row(
                          children: [
                            CupertinoButton(
                              child: Text(
                                'Подтвердить',
                                style: TextStyle(color: Colors.blue),
                              ),
                              onPressed: () {
                                setState(() {
                                  _date = DateTime(
                                    _selectedDate.year,
                                    _selectedDate.month,
                                    _selectedDate.day,
                                    _selectedTime == 'ВСЕ'
                                        ? 00
                                        : int.parse(_selectedTime),
                                  );
                                });
                                print(_selectedTime);
                                _calendarController.setSelectedDay(_date);
                                Navigator.of(context).pop();
                                Navigator.of(context).push(
                                  MaterialPageRoute(
                                    builder: (context) => ChooseVideo(
                                      date: _date,
                                      wholeDay:
                                          _selectedTime == "ВСЕ" ? true : false,
                                    ),
                                  ),
                                );
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                    Container(
                      height: 200.0,
                      child: Flex(
                        direction: Axis.horizontal,
                        children: <Widget>[
                          Flexible(
                            flex: 8,
                            child: CupertinoDatePicker(
                              // minuteInterval: 1,
                              mode: CupertinoDatePickerMode.date,
                              initialDateTime: _date,
                              onDateTimeChanged: (DateTime dateTime) {
                                // setState(() {
                                //   setModalSheetState = setSheetState;
                                // });
                                // debugger();
                                setState(() {
                                  _selectedDate = dateTime;
                                });
                                // _timeList.clear();
                                // setSheetState(() {
                                //   _timeList.add("ВСЕ");
                                //   getHours();
                                //   for (int i = 0; i < 24; i++) {
                                //     if (_hours.contains(
                                //         i.toString().padLeft(2, '0'))) {
                                //       _timeList.add(
                                //         i.toString().padLeft(2, '0'),
                                //       );
                                //     }
                                //   }
                                // });
                                // setTimeList();
                              },
                            ),
                          ),
                          Flexible(
                            flex: 2,
                            child: CupertinoPicker(
                                itemExtent: 38,
                                magnification: 0.95,
                                useMagnifier: true,
                                // looping: true,
                                onSelectedItemChanged: (int index) {
                                  setState(() {
                                    _selectedTime = _timeList[index];
                                  });
                                },
                                children: _timeList
                                    .map(
                                      (item) => Center(
                                        child: Text(
                                          item,
                                          style: TextStyle(
                                            fontSize: 20,
                                          ),
                                        ),
                                      ),
                                    )
                                    .toList()),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        });
  }

这是我现在使用的代码的一部分。

标签: flutterdart

解决方案


推荐阅读