第三百八十五回

文章目录

我们在上一章回中介绍了Snackbar Widget相关的内容,本章回中将介绍TimePickerDialog Widget.闲话休提,让我们一起Talk Flutter吧。

1.概念介绍

我们在这里说的TimePickerDialog是一种弹出窗口,只不过窗口的内容固定显示为时间,它主要用来让用户选择时间,选择完时间后点击确认或者取消按钮,窗口就会消失。本章回将详细介绍它的使用方法。

2.使用方法

和其它Widget类似,我们可以通过TimePickerDialog的属性来操作它,下面是一些常用的属性:

  • initialTime属性:用来调控初始化时间,也就是弹出窗口时看到的时间;
  • cancelText属性:用来控制取消按钮显示的文字;
  • confirmText属性:用来控制确认按钮显示的文字;
  • hourLabelText属性:用来控制小时显示的文字,默认显示Hour;
  • minuteLabelText属性:用来控制分钟显示的文字,默认显示Minute;
  • initialEntryMode属性:用来控制窗口的样式,有dial和input模式供选择;

注意:上面的这些属性中initialTime属性是必选的,其它属性都是可选的。弹出窗口的默认样式默认是dial,在该样式下窗口中会显示设置时间的文字和一个圆盘钟表,这两种方式都可以修改时间,

我的经验是修改成input样式,使用文字形式修改时间,主要是圆盘钟表有些大,占用了很大一部分屏幕。TimePickeerDialog组件不能单独使用,需要配合showDialog()方法或者showTimePicker()方法一起使用才可以。接下来我们通过代码来演示它们如何配合使用。

3.示例代码

dart 复制代码
showDialog(
    context: context,
    builder: (context) {
      return const TimePickerDialog(
        initialTime: TimeOfDay(hour: 12, minute: 3),
        initialEntryMode: TimePickerEntryMode.dial,
      );
});

showTimePicker(
  context: context,
  hourLabelText: "H",
  minuteLabelText: "M",
  initialEntryMode: TimePickerEntryMode.inputOnly,
  initialTime: TimeOfDay(hour: 12, minute: 3),
);

在上面的代码中,我们使用了两种方法来显示TimePickerDialog:showDialog()方法通过builder属性创建了一个TimePickerDialog对象。showTimePicker()方法是直接显示TimePicker,访方法的参数和TimePickerDialog的属性十分相似。把这种方法赋值给Button类组件的onPress属性,点击Button时就会弹出窗口,

然后就可以在窗口中选择时间了。虽然这两种方法都可以创建TimePickerDialog,但是我推荐使用showTimePicker()方法,一方面它比showDialog()方法使用方便,另一方面showDialog()方法中设置TimePickerDialog的属性时没有效果,也就是说你无法修改窗口中显示的内容。我建议大家自己动手试试,体会一下这两种方法的不同点。

看官们,关于TimePickerDialog Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!

相关推荐
talk_83 个月前
通过相机来获取图片
数码相机·移动开发flutter
talk_87 个月前
第四百四十二回 再谈flutter_launcher_icons包
移动开发flutter·launcher_icon·修改桌面图标
talk_87 个月前
第二百二十三回
移动开发flutter
talk_88 个月前
第四百一十五回
移动开发flutter
talk_88 个月前
第四百一十回
移动开发flutter
talk_88 个月前
第三百九十九回
移动开发flutter
talk_88 个月前
第三百八十九回
移动开发flutter
talk_89 个月前
第二百九十六回
前端·移动开发flutter
talk_89 个月前
第二百九十回
数码相机·移动开发flutter