Know the showTimePicker method of the basic components of Flutter

@[TOC]( 浅识Flutter 基本组件之showTimePicker ()方法)
showTimePicker ()method is used to pop up a time picker dialog,该对话框有系统默认的样式,也可以通过builder属性设置自定义样式.After the user selects the time,返回一个TimeOfDay类型的数据.Its common properties and functions are described in the following table.

属性名	类型	功能说明
context	BuildContext	设置BuildContext
initialTime	TimeOfDay	Sets the default time when the time picker is opened
builder	Widget	Set the time picker theme．标题栏等样式

   Row(children: <Widget>[
          Text("The time when the left foot enters the door: "),
          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();//Get the current system time


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

    

  }

The selected time is displayed

/*将选择日期显示出来*/
    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 = ['皇后', '华妃', '甄嬛'];
  bool isChecked = false;
  //定义一个弹出日期选择器的方法showdata
  String data = DateTime.now().toString().substring(0,10);
  Future<DateTime?> showData(context)  async{
       // async异步调用的方法 需要等showDatePicker执行完 加上await
    DateTime? d =await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          lastDate: DateTime.now(),
          firstDate: DateTime(1900, 01, 01));
      /*将选择日期显示出来*/
    setState(() {
    
      data= d.toString().substring(0,10);
    });

    }
  //定义一个弹出日期选择器的方法showdata
  String time = TimeOfDay.fromDateTime(DateTime.now()).toString();//Get the current system time


  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);

    });

  }







  // showData(context) {
    
  // var d=showDatePicker(
  // context: context,
  // initialDate: DateTime.now(),
  // lastDate: DateTime.now(),
  // firstDate: DateTime(1900, 01, 01));
  // /*将选择日期显示出来*/
  // setState(() {
    
  // data= d.toString().substring(0,10);
  // });
  //
  // }

  @override
  Widget build(BuildContext context) {
    
    Row row = Row(
      children: <Widget>[
        Text('选择你的阵营： '),
        Text(select[0]),
        Checkbox(
          value: flag[0],
          onChanged: (value) {
    
            //setState更新值
            setState(() {
    
              flag[0] = value!;
            });
          },
        ),
        Text(select[1]),
        Checkbox(
          value: flag[1],
          onChanged: (value) {
    
            //setState更新值
            setState(() {
    
              flag[1] = value!;
            });
          },
        ),
        Text(select[2]),
        Checkbox(
          value: flag[2],
          onChanged: (value) {
    
            //setState更新值
            setState(() {
    
              flag[2] = value!;
            });
          },
        ),
      ],
    );
    /*创建多个CheckboxListTile*/
    Column column = Column(
      children: <Widget>[
        CheckboxListTile(
          value: this.isChecked,
          /*设置主标题组件*/
          title: Text(
            '全选',
            style: TextStyle(color: Colors.red),
          ),
          /*设置副标题组件*/
          subtitle: Text('全选表示自成一派'),
          /*设置显示的小组件,与□所在位置相反*/
          secondary: Icon(Icons.flag),
          /*调整复选框和图标的位置*/
          controlAffinity: ListTileControlAffinity.leading,
          onChanged: (bool? value) {
    
            setState(() {
    
              isChecked = value!;

              for (int i = 0; i < flag.length; i++) {
    
                flag[i] = isChecked;
              }
            });
          },
        ),
        CheckboxListTile(
            title: Text(select[0]),
            subtitle: Text('堕胎小分队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[0],
            onChanged: (value) {
    
              setState(() {
    
                flag[0] = value;
              });
            }),
        CheckboxListTile(
            title: Text(select[1]),
            subtitle: Text('世兰好苦队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[1],
            onChanged: (value) {
    
              setState(() {
    
                flag[1] = value;
              });
            }),
        CheckboxListTile(
            title: Text(select[2]),
            subtitle: Text('莞莞类卿队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[2],
            onChanged: (value) {
    
              setState(() {
    
                flag[2] = value;
              });
            }),
        // Row(children: <Widget>[
        // Text("选择进宫的日子: "),
        // Text(data),
        // ]),

        /*点击一个按钮,弹出日期选择对话框*/

        Row(children: <Widget>[
          Text("选择进宫的日子: "),
          Text(data+' '),
          FloatingActionButton(
            onPressed: () {
    
              showData(context);
            },
            backgroundColor: Colors.white,

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

          ),


        ]),

        Row(children: <Widget>[
          Text("The time when the left foot enters the door: "),
          Text(time+'                                 '),
          FloatingActionButton(
            onPressed: () {
    
              showTime(context);
            },
            backgroundColor: Colors.white,

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

          ),


        ]),

      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册'),
        centerTitle: true,
      ),
      body: column,

      floatingActionButton: FloatingActionButton(
        onPressed: () {
    
          String info = "你选择的阵营是：";
          for (int i = 0; i < flag.length; i++) {
    
            if (flag[i]) {
    
              /*如果选项被选中*/
              info = info + select[i] + ' ';
            }
          }
          print(info);
        },
        tooltip: 'Increment',
        child: Icon(Icons.save),
      ),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerFloat, //浮标的位置
    );
  }
}