flutter - 如何使颤动中的切换按钮弹出日历和时间

Question

我想创建两个切换按钮，它们将显示从日历中选择日期和时间的选项，但日历不会弹出。我试图寻找一些答案，但找不到任何东西。

代码：

Padding(
            padding: const EdgeInsets.fromLTRB(0, 400, 256, 0),
            child: ToggleButtons(
              children: <Widget>[
                Icon(Icons.bluetooth),
                Icon(Icons.wifi),
                Icon(Icons.flash_on),
              ],
              isSelected: _isSelected,
            ),
          ),

列表

 List<bool> _isSelected = [false, true, false];

标签： flutterbuttonflutter-layouttogglebutton

Answer 1

将您的CupertinoSwitch内部包裹起来ListTile。然后onTap打开一个CupertinoDatePicker或任何您选择的日历选择器。例如：

                    ListTile(
                      title: Text(
                        'Time',
                        style: TextStyle(color: Colors.white),
                      ),
                      trailing: CupertinoSwitch(
                        activeColor: Color(0xff59a3fd),
                        value: globals.isEnable //your switch value here
                        onChanged: (bool value) {
                          setState(() {
                            globals.isEnable = value;
                          });
                          
                        },
                      ),
                      onTap: () {
                         
                          //Open your calender here
                          showCupertinoModalPopup<void>(
                              context: context,
                              builder: (BuildContext context) {
                                return _buildBottomPicker(
                                  CupertinoDatePicker(
                                   mode: CupertinoDatePickerMode.date,
                                   initialDateTime: date,
                                   onDateTimeChanged: (DateTimeaddSelectedDate){                                     
                                      setState(() {
                                        this.newDateTime = addSelectedDate;
                                           date = newDateTime;
                                      });
                                    },
                                  ),
                                );
                              },
                            );                           
                          },
                        )