Blazor Hybrid MAUI Android端如何将圆形时间选择器改为Spinner样式？

以下是几种可行的解决方案，针对不同场景选择适配方案：

方案一：修改Android主题，适配HTML <input type="time"> #

Blazor Hybrid中HTML的input[type="time"]在Android上会调用系统原生时间选择器，默认Material Design 3为圆形样式，可通过修改Android主题强制切换为Spinner模式：

1. 打开MAUI项目中Platforms/Android/Resources/values/styles.xml文件
2. 在AppTheme节点内添加以下配置：

   <!-- 全局设置TimePicker为Spinner模式 -->
   <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
   <!-- 设置TimePickerDialog为Spinner模式 -->
   <item name="android:timePickerDialogTheme">@style/SpinnerTimePickerDialog</item>
   
   <!-- 定义Spinner样式 -->
   <style name="SpinnerTimePicker" parent="@android:style/Widget.Material.Light.TimePicker.Spinner">
   </style>
   
   <style name="SpinnerTimePickerDialog" parent="@android:style/Theme.Material.Light.Dialog.TimePicker">
       <item name="android:timePickerMode">spinner</item>
   </style>
   

3. 重新编译项目，此时HTML的时间选择器会自动切换为Spinner样式（iOS平台原生默认就是Spinner样式，无需额外配置）

方案二：嵌入MAUI原生TimePicker组件 #

通过Blazor Hybrid的原生组件嵌入能力，直接使用MAUI的TimePicker并配置Spinner模式：

1. 封装一个Blazor组件SpinnerTimePicker.razor：

   @using Microsoft.Maui.Controls
   
   <TimePicker Format="HH:mm"
               VerticalOptions="LayoutOptions.Center"
               HorizontalOptions="LayoutOptions.Fill"
               TimeChanged="OnTimeChanged"
               Style="@("border-bottom:1px #bdbdbd solid; height:40px;")" />
   
   @code {
       [Parameter] public TimeSpan Value { get; set; }
       [Parameter] public EventCallback<TimeSpan> ValueChanged { get; set; }
   
       private void OnTimeChanged(object sender, TimeChangedEventArgs e)
       {
           if (ValueChanged.HasDelegate)
               ValueChanged.InvokeAsync(e.NewTime);
       }
   }
   

2. 在Blazor页面中引用该组件：

   <SpinnerTimePicker Value="@SelectedTime" ValueChanged="@HandleTimeUpdate" />
   
   @code {
       private TimeSpan SelectedTime = TimeSpan.FromHours(12);
   
       private void HandleTimeUpdate(TimeSpan newTime)
       {
           SelectedTime = newTime;
           // 处理时间变更逻辑
       }
   }
   

3. 同样需要在Android的styles.xml中添加方案一的主题配置，确保原生TimePicker使用Spinner模式

方案三：使用纯Blazor第三方时间选择器 #

如果想完全脱离系统原生控件限制，可使用Blazor第三方组件（如Blazorise）实现自定义Spinner样式：

1. 安装Blazorise NuGet包：

   Install-Package Blazorise
   Install-Package Blazorise.Bootstrap
   

2. 在项目Program.cs中配置Blazorise：

   builder.Services.AddBlazorise(options =>
   {
       options.ChangeTextOnKeyPress = true;
   }).AddBootstrapProviders();
   

3. 在Blazor页面中使用：

   <TimePicker TValue="TimeSpan?" @bind-Value="SelectedTime" 
               Style="@("width:100%; height:40px; border-bottom:1px #bdbdbd solid;")" />
   
   @code {
       private TimeSpan? SelectedTime { get; set; }
   }
   

   这种方案的样式完全可控，不受系统原生组件限制。

内容的提问来源于stack exchange，提问作者Smith5727