如何为CupertinoTimerPicker添加天数/不限时长？或替代实现时分选择？

嘿，我来帮你搞定这两个Flutter相关的问题～

CupertinoTimerPicker本身只支持时、分、秒的选择，没有内置天数和“不限时长”的选项，但咱们可以通过扩展组件来实现：

1. 新增天数选择器 #

把自定义的天数选择器和原有的CupertinoTimerPicker用Column组合，同时维护天数的状态：

int selectedDays = 0;
Duration initialtimer = Duration(hours: 1, minutes: 30);

Widget timePickerWithDays() {
  return Column(
    children: [
      // 自定义天数滚轮
      CupertinoPicker(
        itemExtent: 32,
        onSelectedItemChanged: (index) {
          setState(() {
            selectedDays = index;
          });
        },
        children: List.generate(31, (index) => Text('${index}天')), // 可按需调整最大天数
      ),
      // 你原来的时分选择器
      CupertinoTimerPicker(
        mode: CupertinoTimerPickerMode.hm,
        minuteInterval: 1,
        initialTimerDuration: initialtimer,
        onTimerDurationChanged: (Duration changedtimer) {
          setState(() {
            initialtimer = changedtimer;
          });
        },
      ),
    ],
  );
}

后续可以把天数和时分合并成总时长：
Duration(days: selectedDays, hours: initialtimer.inHours, minutes: initialtimer.inMinutes.remainder(60))

2. 添加“不限时长”开关 #

用CupertinoSwitch做一个切换开关，开启后可以忽略Picker的时长值：

bool isUnlimited = false;
Duration initialtimer = Duration(hours: 1, minutes: 30);

Widget timePickerWithUnlimited() {
  return Column(
    children: [
      // 不限时长切换栏
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('不限时长'),
          CupertinoSwitch(
            value: isUnlimited,
            onChanged: (value) {
              setState(() {
                isUnlimited = value;
              });
            },
          ),
        ],
      ),
      // 仅关闭不限时长时显示Picker
      if (!isUnlimited)
        CupertinoTimerPicker(
          mode: CupertinoTimerPickerMode.hm,
          minuteInterval: 1,
          initialTimerDuration: initialtimer,
          onTimerDurationChanged: (Duration changedtimer) {
            setState(() {
              initialtimer = changedtimer;
            });
          },
        ),
    ],
  );
}

使用时判断isUnlimited的值即可：为true则代表不限时长，否则用initialtimer的数值。

当然有办法！用原生的CupertinoPicker自己做两个独立滚轮，灵活性拉满：

int selectedHour = 1;
int selectedMinute = 30;

Widget customTimePicker() {
  return Row(
    children: [
      // 小时选择滚轮
      Expanded(
        child: CupertinoPicker(
          itemExtent: 32,
          onSelectedItemChanged: (index) {
            setState(() {
              selectedHour = index;
            });
          },
          children: List.generate(24, (index) => Text('${index}时')),
        ),
      ),
      // 分钟选择滚轮
      Expanded(
        child: CupertinoPicker(
          itemExtent: 32,
          onSelectedItemChanged: (index) {
            setState(() {
              selectedMinute = index; // 若要设置间隔（比如5分钟），改成index*5即可
            });
          },
          children: List.generate(60, (index) => Text('${index}分')),
        ),
      ),
    ],
  );
}

这种方式你可以完全控制每个滚轮的选项内容、间隔和样式，甚至给每个Picker加自定义背景、调整宽度，适配你的UI需求。

内容的提问来源于stack exchange，提问作者user9139407