识Flutter 基本组件之showTimePicker 方法_flutter showtimepicker-CSDN博客

本文链接：https://blog.csdn.net/qq_43336158/article/details/125492118

本文介绍了Flutter中的showTimePicker方法，用于弹出时间选择器对话框，用户选择时间后返回TimeOfDay数据。该方法支持系统默认样式和自定义样式，并提供了属性配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@[TOC]( 浅识Flutter 基本组件之showTimePicker ()方法)
showTimePicker ()方法用于弹出一个时间选择器对话框，该对话框有系统默认的样式，也可以通过builder属性设置自定义样式。在用户选择时间后，返回一个TimeOfDay类型的数据。它的常用属性及功能说明如下表。

属性名	类型	功能说明
context	BuildContext	设置BuildContext
initialTime	TimeOfDay	设置时间选择器打开时默认时间
builder	Widget	设置时间选择器主题．标题栏等样式

   Row(children: <Widget>[
          Text("左脚进门的时间:  "),
          Text(time+'                                 '),
          FloatingActionButton(
            onPressed: () {
   
              showTime(context);
            },
            backgroundColor: Colors.white,

            child: Icon(Icons.access_time_outlined, color: Colors.grey ),

          ),


        ]),

在这里插入图片描述

 //定义一个弹出日期选择器的方法showdata
  String time = TimeOfDay.fromDateTime(DateTime.now()).toString();//取得当前系统的时间


  Future<TimeOfDay?>  showTime(context)  async{
      //  async异步调用的方法 需要等showDatePicker执行完  加上await
    TimeOfDay? t =await showTimePicker(context: context, initialTime: TimeOfDay.fromDateTime(DateTime.now()));

    

  }

在这里插入图片描述

将选择的时间显示出来

/*将选择日期显示出来*/
    setState(() {
   
      String? apm=t?.period.toString()=='DayPeriod.am'?'上午':'下午';
      time= apm+t.toString().substring(10,15);

    });

在这里插入图片描述

完整代码

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

class zhucepage extends StatefulWidget {
   
  @override
  State<StatefulWidget> createState() {
   
    return MyState();
  }
}

class MyState extends State {
   
  List flag = [false, false, false];
  List select = ['皇后', '华妃'