Flutter时间选择器插件dropdown_timepicker的使用

Flutter时间选择器插件dropdown_timepicker的使用

描述

Dropdown TimePicker 是一个为Flutter应用提供的可自定义的时间选择器。它支持12小时和24小时格式，并且可以通过下拉菜单选择时间。以下是关于如何使用该插件的详细说明和完整示例代码。

功能

• 支持12小时和24小时格式
• 可自定义样式（如边框、提示文本等）
• 支持表单验证
• 提供回调函数以获取用户选择的时间

截图

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 dropdown_timepicker 依赖：

dependencies:
  dropdown_timepicker: ^0.1.0

2. 完整示例代码

// ignore_for_file: avoid_print

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown TimePicker Demo',
      themeMode: ThemeMode.system,
      theme: ThemeData(
        brightness: Brightness.light,
        // light theme settings
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        // dark theme settings
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Dropdown TimePicker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  AutovalidateMode _autovalidate = AutovalidateMode.disabled;
  String _selectedAmPm = 'AM';
  int _selectedMins = 10;
  int _selectedHours = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: formKey,
        autovalidateMode: _autovalidate,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownTimePicker(
                isExpanded: true, // 使下拉框占据整个宽度
                isDropdownHideUnderline: true, // 隐藏下拉框的下划线
                isFormValidator: true, // 启用表单验证
                showAmPm: true, // 显示AM/PM选项
                width: 10, // 设置下拉框的宽度（可选）
                is24format: false, // 使用12小时格式
                onChangedAmPm: (value) {
                  setState(() {
                    _selectedAmPm = value ?? 'AM'; // 更新AM/PM值
                  });
                  print('onChangedAM: $value'); // 打印选择的AM/PM
                },
                onChangedMins: (value) {
                  setState(() {
                    _selectedMins = int.parse(value ?? '10'); // 更新分钟数
                  });
                  print('onChangedMins: $value'); // 打印选择的分钟数
                },
                onChangedHours: (value) {
                  setState(() {
                    _selectedHours = int.parse(value ?? '1'); // 更新小时数
                  });
                  print('onChangedHours: $value'); // 打印选择的小时数
                },
              ),
              MaterialButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    formKey.currentState!.save();
                    TimeOfDay? date = _dateTime(_selectedAmPm, _selectedMins, _selectedHours);
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        action: SnackBarAction(
                          label: 'OK',
                          onPressed: () {},
                        ),
                        content: Text('选择的时间是 $date'), // 显示选择的时间
                        elevation: 20,
                      ),
                    );
                  } else {
                    print('验证失败');
                    setState(() {
                      _autovalidate = AutovalidateMode.always; // 开启自动验证
                    });
                  }
                },
                child: const Text('提交'),
              )
            ],
          ),
        ),
      ),
    );
  }

  // 将字符串转换为TimeOfDay对象
  TimeOfDay? _dateTime(String? ampm, int? mins, int? hours) {
    if (mins != null && hours != null) {
      // 将AM/PM转换为24小时制
      if (ampm != null && ampm == 'PM') {
        hours = hours + 12;
      }
      return TimeOfDay(hour: hours, minute: mins);
    }
    return null;
  }
}