如何在FlutterFlow中添加可选择时分的Cupertino（iOS风格）时间选择器？

步骤1：创建自定义Widget #

• 打开FlutterFlow项目，左侧菜单栏点「Custom Widgets」→「Add Custom Widget」
• 命名为CupertinoTimePicker，选择「Stateful Widget」（需要维护选中时间的状态）

步骤2：替换自定义Widget代码 #

删掉默认生成的代码，粘贴以下内容：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CupertinoTimePicker extends StatefulWidget {
  const CupertinoTimePicker({
    super.key,
    required this.onTimeSelected,
    this.initialTime = const TimeOfDay(hour: 12, minute: 0),
  });

  final Function(TimeOfDay) onTimeSelected;
  final TimeOfDay initialTime;

  @override
  State<CupertinoTimePicker> createState() => _CupertinoTimePickerState();
}

class _CupertinoTimePickerState extends State<CupertinoTimePicker> {
  late TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = widget.initialTime;
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoButton(
      child: Text(
        _selectedTime.format(context),
        style: const TextStyle(fontSize: 16),
      ),
      onPressed: () {
        showCupertinoModalPopup(
          context: context,
          builder: (context) => Container(
            height: 250,
            color: CupertinoColors.white,
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    CupertinoButton(
                      child: const Text('确定'),
                      onPressed: () {
                        widget.onTimeSelected(_selectedTime);
                        Navigator.pop(context);
                      },
                    ),
                  ],
                ),
                Expanded(
                  child: CupertinoTimerPicker(
                    mode: CupertinoTimerPickerMode.hm,
                    initialTimerDuration: Duration(
                      hours: _selectedTime.hour,
                      minutes: _selectedTime.minute,
                    ),
                    onTimerDurationChanged: (duration) {
                      setState(() {
                        _selectedTime = TimeOfDay(
                          hour: duration.inHours,
                          minute: duration.inMinutes.remainder(60),
                        );
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

核心逻辑说明：

• 使用官方CupertinoTimerPicker组件，通过mode: CupertinoTimerPickerMode.hm限制仅显示小时和分钟
• 点击按钮弹出iOS风格的选择器弹窗，确认选择后通过onTimeSelected回调将时间传回FlutterFlow
• 支持设置初始时间，默认值为12:00

步骤3：在页面中使用自定义Widget #

• 回到页面编辑器，从左侧「Widgets」→「Custom」分类中拖入CupertinoTimePicker
• 右侧属性面板配置「On Time Selected」：选择「Set App State」，将选中的时间存入提前创建的TimeOfDay类型App State变量
• 需要初始时间的话，在「Initial Time」选项中设置对应时间即可

步骤4：测试功能 #

点击预览按钮，使用iOS模拟器或真机打开页面，点击时间选择器即可触发弹窗，选择完成后时间会同步到设置的变量中。

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