通过

TimePicker

.NET 多平台应用 UI （.NET MAUI） TimePicker 调用平台的时间选取器控件，并允许你选择时间。

TimePicker 定义以下属性：

  • Time 类型 TimeSpan，所选时间，默认为 TimeSpan 0。 该 TimeSpan 类型指示自午夜以来的持续时间。
  • Format 类型 string为 标准 或 自定义 .NET 格式字符串，默认为“t”，即短时间模式。
  • TextColor 类型 Color，用于显示所选时间的颜色。
  • FontAttributes 类型 FontAttributes，默认为 FontAtributes.None.
  • FontFamily 类型 string，默认为 null.
  • FontSize 类型 double，默认为 -1.0。
  • CharacterSpacing类型 double，是文本字符 TimePicker 之间的间距。

所有这些属性都由 BindableProperty 对象提供支持，这意味着这些属性可以设置样式，并且这些属性可以是数据绑定的目标。 该 Time 属性具有默认绑定模式 BindingMode.TwoWay，这意味着它可以是使用 Model-View-ViewModel （MVVM） 模式的应用程序中的数据绑定的目标。

TimePicker 定义以下属性：

  • Time 类型 TimeSpan?，所选时间。 设置为 null 表示未选择时间。 非 null 值必须小于 24 小时且 >= 0 毫秒。
  • Format 类型 string为 标准 或 自定义 .NET 格式字符串，默认为“t”，即短时间模式。
  • TextColor 类型 Color，用于显示所选时间的颜色。
  • FontAttributes 类型 FontAttributes，默认为 FontAtributes.None.
  • FontFamily 类型 string，默认为 null.
  • FontSize 类型 double，默认为 -1.0。
  • CharacterSpacing类型 double，是文本字符 TimePicker 之间的间距。
  • IsOpen 类型 bool （双向），指示平台时间选取器 UI 是否打开。

所有这些属性都由 BindableProperty 对象支持。 该 Time 属性的默认绑定模式为 BindingMode.TwoWay.

其他事件：

  • Opened 和 Closed 事件指示何时显示或关闭平台时间选取器 UI。

注释

TimePicker不包括用于指示新选定Time值的事件。 如果需要收到此通知，可以添加事件的 PropertyChanged 事件处理程序。

此外， TimePicker 定义在 TimeSelected 所选时间更改时引发的事件。 TimeChangedEventArgs 事件附带的 TimeSelected 对象具有 NewTime 和 OldTime 属性，分别指定新时间和旧时间。

创建 TimePicker

Time在 XAML 中指定属性时，该值将转换为并TimeSpan验证，以确保毫秒数大于或等于 0，并且小时数小于 24。 时间组件应用冒号分隔：

<TimePicker Time="4:15:26" />

以下屏幕截图显示了 iOS 上的结果 TimePicker ：

iOS 上的 TimePicker 控件的屏幕截图。

如果属性BindingContextTimePicker设置为包含名为 TimeSpan （例如）类型的SelectedTime属性的 viewmodel 实例，则可以实例化TimePicker如下所示：

<TimePicker Time="{Binding SelectedTime}" />

在此示例中，该 Time 属性初始化为 SelectedTime viewmodel 中的属性。 由于该 Time 属性具有绑定模式 TwoWay，因此用户选择的任何新时间都会自动传播到 viewmodel。

在代码中Time，可以将属性初始化为类型为：TimeSpan

TimePicker timePicker = new TimePicker
{
  Time = new TimeSpan(4, 15, 26) // Time set to "04:15:26"
};

有关设置字体属性的信息，请参阅 “字体”。

TimePicker 和布局

可以使用不受约束的水平布局选项，例如Center，Start或使用EndTimePicker：

<TimePicker ···
            HorizontalOptions="Center" />

但是不建议这样做。 根据属性的设置 Format ，所选时间可能需要不同的显示宽度。 例如，“T”格式字符串导致 TimePicker 视图以长格式显示时间，而“4：15：26 AM”需要比“4：15 AM”的短时间格式（“t”）更大的显示宽度。 根据平台的不同，这种差异可能会导致 TimePicker 视图在布局中更改宽度，或使显示器被截断。

小窍门

最好使用默认设置HorizontalOptions，FillTimePicker不要在单元格中Auto输入TimePicker时使用宽度Grid。

平台差异

本部分介绍控件 TimePicker 特定于平台的差异。

在 Android 上，该 Format 属性由控件尊重和显示。 但是，当按控件显示选取器控件时，只能更改一天中的小时、分钟和时间。

可为 Null 的选定时间 （.NET 10）

在 .NET 10 中，支持可为 null 的选定时间， TimePicker 以便可以在绑定中表示“未选择时间”和清除所选内容。 该 Time 属性通过 TimeSpan? 验证，任何非 null 值都具有小时 < 24 毫秒 >= 0。

绑定示例和用于清除所选内容的命令：

<VerticalStackLayout>
  <TimePicker Time="{Binding SelectedTime}" />
  <Button Text="Clear time" Command="{Binding ClearTimeCommand}" />
  <Label Text="Selected: {Binding SelectedTime}" />

  <!-- Optional: display a placeholder when no time is selected -->
  <Label IsVisible="{Binding SelectedTime, Converter={StaticResource NullToBoolConverter}}"
         Text="No time selected" />
</VerticalStackLayout>

ViewModel 草图：

public partial class MyViewModel : ObservableObject
{
    [ObservableProperty]
    private TimeSpan? selectedTime;

    [RelayCommand]
    void ClearTime() => SelectedTime = null;
}

：：：包括。。/../includes/mvvm-toolkit-note.md

在代码中设置/清除：

timePicker.Time = null;                 // Clear selection (no time)
timePicker.Time = new TimeSpan(14, 30, 0); // 2:30 PM

以编程方式打开和关闭时间选取器

：：：包括。。/../includes/pickers-open-close-dotnet10.md

  • Last updated on