Flutter&OpenHarmony日期时间选择器实现

前言

日期时间选择器是笔记应用中常用的功能组件，用户可以通过它设置笔记的提醒时间、截止日期、创建日期等时间相关的属性。一个优秀的日期时间选择器应该提供直观的界面、便捷的操作方式以及灵活的配置选项。本文将详细介绍如何在Flutter和OpenHarmony平台上实现功能完善的日期时间选择器，帮助开发者为笔记应用添加时间管理功能。

Flutter日期选择器

Flutter提供了showDatePicker函数来显示日期选择对话框。

dart 复制代码

Future<void> _selectDate() async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: _selectedDate ?? DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2030),
    locale: Locale('zh', 'CN'),
  );
  if (picked != null) {
    setState(() {
      _selectedDate = picked;
    });
  }
}

showDatePicker是Flutter内置的日期选择器，它显示一个Material风格的日历对话框。initialDate设置初始选中的日期，通常使用当前日期或已保存的日期。firstDate和lastDate限制可选择的日期范围，这在设置提醒时间时很有用，可以防止用户选择过去的日期。locale参数设置本地化语言，'zh'和'CN'表示使用中文显示。选择完成后返回DateTime对象，如果用户取消则返回null。

dart 复制代码

Future<void> _selectDateRange() async {
  final DateTimeRange? picked = await showDateRangePicker(
    context: context,
    firstDate: DateTime.now(),
    lastDate: DateTime.now().add(Duration(days: 365)),
    initialDateRange: DateTimeRange(
      start: DateTime.now(),
      end: DateTime.now().add(Duration(days: 7)),
    ),
  );
  if (picked != null) {
    setState(() {
      _startDate = picked.start;
      _endDate = picked.end;
    });
  }
}

showDateRangePicker用于选择日期范围，非常适合设置任务的开始和结束日期。initialDateRange设置初始的日期范围，用户可以分别选择开始日期和结束日期。返回的DateTimeRange对象包含start和end两个属性。在笔记应用中，日期范围选择可以用于筛选特定时间段内的笔记，或者设置项目的时间跨度。

Flutter时间选择器

时间选择器用于选择具体的时分。

dart 复制代码

Future<void> _selectTime() async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: _selectedTime ?? TimeOfDay.now(),
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );
  if (picked != null) {
    setState(() {
      _selectedTime = picked;
    });
  }
}

showTimePicker显示时间选择对话框，用户可以选择小时和分钟。initialTime设置初始时间，TimeOfDay.now()获取当前时间。builder参数可以自定义时间选择器的外观，这里通过MediaQuery强制使用24小时制显示。TimeOfDay对象包含hour和minute属性，可以与DateTime组合使用来表示完整的日期时间。

dart 复制代码

DateTime _combineDateAndTime(DateTime date, TimeOfDay time) {
  return DateTime(
    date.year,
    date.month,
    date.day,
    time.hour,
    time.minute,
  );
}

将日期和时间组合成完整的DateTime对象是常见的需求。这个辅助函数接收Date和TimeOfDay参数，创建一个包含完整日期时间信息的DateTime对象。在设置笔记提醒时，通常需要先让用户选择日期，再选择时间，最后组合成完整的提醒时间。这种分步选择的方式比一次性选择日期时间更加清晰易用。

OpenHarmony日期选择器

OpenHarmony提供了DatePicker组件实现日期选择。

typescript 复制代码

DatePicker({
  start: new Date('2020-01-01'),
  end: new Date('2030-12-31'),
  selected: this.selectedDate
})
.onChange((value: DatePickerResult) => {
  this.selectedDate = new Date(value.year, value.month, value.day)
})
.width('100%')
.height(200)

OpenHarmony的DatePicker是一个内嵌式的日期选择组件，而不是弹出对话框。start和end属性设置可选择的日期范围，selected绑定当前选中的日期。onChange回调在用户滚动选择日期时触发，DatePickerResult包含year、month、day属性。这种滚轮式的选择方式在移动设备上非常常见，用户可以通过上下滑动来选择日期。

typescript 复制代码

@CustomDialog
struct DatePickerDialog {
  controller: CustomDialogController
  @State selectedDate: Date = new Date()
  onConfirm: (date: Date) => void = () => {}
  
  build() {
    Column() {
      Text('选择日期')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 15 })
      
      DatePicker({
        start: new Date('2020-01-01'),
        end: new Date('2030-12-31'),
        selected: this.selectedDate
      })
      .onChange((value: DatePickerResult) => {
        this.selectedDate = new Date(value.year, value.month, value.day)
      })
      
      Row() {
        Button('取消')
          .onClick(() => this.controller.close())
        Button('确定')
          .onClick(() => {
            this.onConfirm(this.selectedDate)
            this.controller.close()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin({ top: 15 })
    }
    .padding(20)
  }
}

如果需要弹出式的日期选择器，可以将DatePicker封装在CustomDialog中。对话框包含标题、日期选择器和操作按钮。onConfirm回调将选中的日期传递给调用方。这种封装方式提供了与Flutter showDatePicker类似的使用体验，同时保留了OpenHarmony DatePicker的原生外观。

OpenHarmony时间选择器

typescript 复制代码

TimePicker({
  selected: this.selectedTime
})
.useMilitaryTime(true)
.onChange((value: TimePickerResult) => {
  this.selectedHour = value.hour
  this.selectedMinute = value.minute
})
.width('100%')
.height(200)

TimePicker组件用于选择时间，selected绑定当前选中的时间。useMilitaryTime设置为true使用24小时制显示。onChange回调返回TimePickerResult对象，包含hour和minute属性。与DatePicker类似，TimePicker也是滚轮式的选择组件，用户可以分别滚动小时和分钟列来选择时间。

日期时间格式化

选择的日期时间需要格式化后显示给用户。

dart 复制代码

String _formatDateTime(DateTime dateTime) {
  return '${dateTime.year}年${dateTime.month}月${dateTime.day}日 '
         '${dateTime.hour.toString().padLeft(2, '0')}:'
         '${dateTime.minute.toString().padLeft(2, '0')}';
}

日期时间格式化是将DateTime对象转换为人类可读的字符串。padLeft方法用于在数字前补零，确保小时和分钟始终显示两位数字。这种手动格式化的方式简单直接，适合固定格式的场景。在笔记应用中，格式化后的日期时间可以显示在笔记卡片上，让用户一目了然地看到笔记的创建时间或提醒时间。

dart 复制代码

import 'package:intl/intl.dart';

String _formatDateTimeWithIntl(DateTime dateTime) {
  final formatter = DateFormat('yyyy年MM月dd日 HH:mm', 'zh_CN');
  return formatter.format(dateTime);
}

intl包提供了更强大的日期时间格式化功能，支持多种预定义格式和自定义格式。DateFormat类可以指定格式模式和语言环境，format方法将DateTime转换为格式化字符串。使用intl包可以更方便地处理国际化需求，根据用户的语言设置显示不同格式的日期时间。

提醒时间设置界面

将日期时间选择器整合到提醒设置界面中。

dart 复制代码

ListTile(
  leading: Icon(Icons.calendar_today),
  title: Text('提醒日期'),
  subtitle: Text(_selectedDate != null 
      ? _formatDate(_selectedDate!) 
      : '未设置'),
  trailing: Icon(Icons.chevron_right),
  onTap: _selectDate,
)

使用ListTile展示当前选择的日期，点击后打开日期选择器。leading放置日历图标，title显示标签文字，subtitle显示当前选择的日期或"未设置"提示。trailing的箭头图标暗示这是一个可点击的项目。这种设计模式在设置页面中非常常见，简洁明了地展示当前值并提供修改入口。

总结

日期时间选择器是笔记应用中管理时间信息的重要组件。Flutter和OpenHarmony都提供了完善的日期时间选择功能，开发者可以根据应用的设计风格选择合适的实现方式。通过合理的界面设计和格式化处理，可以为用户提供便捷的时间设置体验，帮助用户更好地管理笔记的时间属性。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net