Flutter中如何用时间选择器展示API返回时间并实现修改

不用再依赖TimeOfDay.now()了，直接把API返回的时间字符串转成TimeOfDay对象来用就行，具体操作和代码示例如下：

• 把API时间字符串转成TimeOfDay对象
  把"22:05"这类字符串按冒号拆分成小时和分钟，转成整数后创建TimeOfDay实例，24小时制的话直接使用即可，无需额外转换。

• 用转换后的时间初始化状态
  在State类里定义一个TimeOfDay类型的变量，在initState方法里完成字符串转TimeOfDay的操作并赋值，替代原来的TimeOfDay.now()初始化逻辑。

• 打开时间选择器时用这个初始时间
  调用showTimePicker时，将initialTime参数设置为我们转换好的时间，这样选择器打开时默认选中的就是API返回的时间。

• 选择新时间后更新状态刷新UI
  选完时间后，更新状态变量，输入框会自动刷新显示新的时间。

完整代码示例：

import 'package:flutter/material.dart';

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

  @override
  State<TimeInputPage> createState() => _TimeInputPageState();
}

class _TimeInputPageState extends State<TimeInputPage> {
  // 模拟API返回的时间字符串
  final String apiTimeStr = "22:05";
  late TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    // 拆分时间字符串并转换为TimeOfDay
    final timeParts = apiTimeStr.split(':');
    final hour = int.parse(timeParts[0]);
    final minute = int.parse(timeParts[1]);
    _selectedTime = TimeOfDay(hour: hour, minute: minute);
  }

  Future<void> _openTimePicker() async {
    final pickedTime = await showTimePicker(
      context: context,
      initialTime: _selectedTime, // 用API返回的时间初始化选择器
      // 强制使用24小时制显示，可选配置
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child!,
        );
      },
    );

    if (pickedTime != null && pickedTime != _selectedTime) {
      setState(() {
        _selectedTime = pickedTime;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('时间选择')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(
          readOnly: true,
          onTap: _openTimePicker,
          decoration: InputDecoration(
            labelText: '设置时间',
            hintText: _selectedTime.format(context),
            suffixIcon: const Icon(Icons.access_time),
          ),
        ),
      ),
    );
  }
}

关键注意点：

• 务必在initState里完成时间转换，确保页面初始化时就显示API返回的时间
• showTimePicker的initialTime必须传入自定义的_selectedTime，而不是默认的当前时间
• 如果API返回的是带AM/PM的12小时制字符串，需要额外处理转换逻辑，你的场景是24小时制，直接拆分即可

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