iOS中为TimePicker添加额外文本的Xamarin/MAUI原生实现方法

由于iOS原生UIDatePicker没有直接提供为滚轮添加附加文本的API，我们需要通过添加自定义UILabel作为子视图的方式实现需求。以下是修改后的渲染器代码：

首先，在自定义渲染器类中添加两个私有标签字段，用于复用和清理：

private UILabel _hourLabel;
private UILabel _minuteLabel;

然后修改OnElementChanged方法，添加标签创建和布局逻辑：

protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
{
    base.OnElementChanged(e);

    if (Control == null)
        return;

    var timePicker = (UIDatePicker)Control.InputView;
    timePicker.MinuteInterval = 5;
    
    Control.BackgroundColor = UIColor.Clear;
    Control.BorderStyle = UITextBorderStyle.None;
    Control.TextColor = UIColor.Black;

    if (!Control.Enabled)
        Control.TextColor = UIColor.LightGray;

    if (Control.Focused)
        Control.TextColor = UIColor.FromRGB(154, 23, 47);

    // 处理标签的创建和清理
    if (e.NewElement != null)
    {
        SetupTimePickerLabels(timePicker);
    }
    else
    {
        _hourLabel?.RemoveFromSuperview();
        _minuteLabel?.RemoveFromSuperview();
        _hourLabel = null;
        _minuteLabel = null;
    }
}

添加标签创建和布局的辅助方法：

private void SetupTimePickerLabels(UIDatePicker timePicker)
{
    // 移除旧标签避免重复添加
    _hourLabel?.RemoveFromSuperview();
    _minuteLabel?.RemoveFromSuperview();

    // 创建小时栏标签
    _hourLabel = new UILabel
    {
        Text = "Stunden（小时）",
        Font = UIFont.SystemFontOfSize(14),
        TextColor = UIColor.Black,
        TranslatesAutoresizingMaskIntoConstraints = false
    };

    // 创建分钟栏标签
    _minuteLabel = new UILabel
    {
        Text = "Min.",
        Font = UIFont.SystemFontOfSize(14),
        TextColor = UIColor.Black,
        TranslatesAutoresizingMaskIntoConstraints = false
    };

    // 将标签添加到时间选择器
    timePicker.AddSubview(_hourLabel);
    timePicker.AddSubview(_minuteLabel);

    // 使用AutoLayout约束定位标签（可根据实际需求调整偏移量）
    NSLayoutConstraint.ActivateConstraints(new[]
    {
        // 小时标签垂直居中，位于小时滚轮右侧
        _hourLabel.CenterYAnchor.ConstraintEqualTo(timePicker.CenterYAnchor),
        _hourLabel.LeadingAnchor.ConstraintEqualTo(timePicker.CenterXAnchor, -60),

        // 分钟标签垂直居中，位于分钟滚轮右侧
        _minuteLabel.CenterYAnchor.ConstraintEqualTo(timePicker.CenterYAnchor),
        _minuteLabel.LeadingAnchor.ConstraintEqualTo(timePicker.CenterXAnchor, 60)
    });
}

注意事项 #

• 标签的偏移量（-60和60）可能需要根据设备尺寸和字体大小微调，以确保文本与滚轮对齐
• 使用TranslatesAutoresizingMaskIntoConstraints = false确保AutoLayout约束生效，避免屏幕旋转时标签位置错乱
• 如果需要支持深色模式，可以根据UITraitCollection动态调整标签颜色

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