Flutter如何实现开始时间和结束时间选择（小时与分钟）

在Flutter中，如何实现一个可以选择开始时间和结束时间的控件（精确到小时和分钟）？需要支持用户通过滑动或点击来选择具体的小时和分钟，并且能够限制选择的时间范围（比如结束时间不能早于开始时间）。是否有推荐的第三方插件或者原生的实现方式？最好能提供简单的代码示例或实现思路。

2 回复

使用Flutter的showTimePicker方法，可分别选择开始和结束时间。示例代码：

TimeOfDay? startTime = await showTimePicker(...);
TimeOfDay? endTime = await showTimePicker(...);

需处理时间逻辑验证，确保结束时间晚于开始时间。

更多关于Flutter如何实现开始时间和结束时间选择（小时与分钟）的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现开始时间和结束时间选择，可以使用showTimePicker或第三方库。以下是两种实现方式：

1. 使用官方 showTimePicker

import 'package:flutter/material.dart';

class TimePickerExample extends StatefulWidget {
  @override
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay? _startTime;
  TimeOfDay? _endTime;

  // 选择开始时间
  Future<void> _selectStartTime() async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _startTime ?? TimeOfDay.now(),
    );
    if (picked != null && picked != _startTime) {
      setState(() {
        _startTime = picked;
      });
    }
  }

  // 选择结束时间
  Future<void> _selectEndTime() async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _endTime ?? TimeOfDay.now(),
    );
    if (picked != null && picked != _endTime) {
      setState(() {
        _endTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('时间选择器')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            ListTile(
              title: Text('开始时间'),
              subtitle: Text(_startTime?.format(context) ?? '未选择'),
              trailing: Icon(Icons.access_time),
              onTap: _selectStartTime,
            ),
            ListTile(
              title: Text('结束时间'),
              subtitle: Text(_endTime?.format(context) ?? '未选择'),
              trailing: Icon(Icons.access_time),
              onTap: _selectEndTime,
            ),
            SizedBox(height: 20),
            if (_startTime != null && _endTime != null)
              Text(
                '时间段: ${_startTime!.format(context)} - ${_endTime!.format(context)}',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

2. 使用第三方库 flutter_datetime_picker

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_datetime_picker: ^1.5.1

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

// 选择开始时间
void _selectStartTime() {
  DatePicker.showTimePicker(
    context,
    showTitleActions: true,
    onConfirm: (time) {
      setState(() {
        _startTime = TimeOfDay.fromDateTime(time);
      });
    },
    currentTime: DateTime.now(),
  );
}

// 选择结束时间  
void _selectEndTime() {
  DatePicker.showTimePicker(
    context,
    showTitleActions: true,
    onConfirm: (time) {
      setState(() {
        _endTime = TimeOfDay.fromDateTime(time);
      });
    },
    currentTime: DateTime.now(),
  );
}

主要特点：

  • showTimePicker: 官方组件，简单易用，但样式固定
  • 第三方库: 提供更多自定义选项和样式
  • 两种方式都支持24小时制和12小时制（根据系统设置）
  • 可以添加时间验证逻辑，确保结束时间晚于开始时间

选择哪种方式取决于你的具体需求，如果只需要基本功能，官方组件足够使用；如果需要更多自定义，推荐使用第三方库。

回到顶部