.NET MAUI绑定其他元素属性在iOS平台无法正常工作

我编写了一段XAML代码，用于给“Distance”文本添加绿色下划线，在Android平台运行正常，但在iOS平台完全不生效。已在模拟器及两台真实设备上测试，结果一致，且绑定的断点未触发，iOS上仅显示文本，无对应的绿色下划线。

原代码如下：

<VerticalStackLayout Grid.Row="1"
                     Grid.Column="0">
    <Label x:Name="lblDistanceText"
       Text="Distance"
       FontSize="Medium"
       FontAttributes="Bold"
       VerticalOptions="CenterAndExpand"
       HorizontalOptions="Center"
       Margin="0,0,0,0"/>
    <Line Stroke="DarkGreen"
          StrokeThickness="3"
          StrokeLineCap="Round"
          Opacity="0.85"
          HorizontalOptions="Center"
          X2="{Binding Source={x:Reference lblDistanceText}, Path=Width}">
        <Line.Shadow>
            <Shadow Brush="DarkGreen"
                Offset="0,0"
                Radius="6"
                Opacity="0.9" />
        </Line.Shadow>
    </Line>
    <Label 
       Text="{Binding TotalDistance}"
       FontSize="Medium"
       FontAttributes="Bold"
       VerticalOptions="CenterAndExpand"
       HorizontalOptions="Center"
       Margin="0,0,0,0"/>
</VerticalStackLayout>

问题原因分析 #

iOS平台上，Line通过x:Reference绑定Label的Width属性存在布局时机问题：Label的宽度在布局流程完成前可能未正确计算，且iOS的绑定机制对控件尺寸变化的通知逻辑与Android存在差异，导致X2的值无法正确更新，最终下划线不显示。

解决方案 #

方案1：使用Label原生下划线属性（推荐跨平台） #

直接利用Label的TextDecorations属性添加下划线，再通过自定义渲染器修改下划线颜色和样式，避免依赖Line控件的布局绑定。

XAML代码修改：

<VerticalStackLayout Grid.Row="1"
                     Grid.Column="0">
    <Label x:Name="lblDistanceText"
           Text="Distance"
           FontSize="Medium"
           FontAttributes="Bold"
           VerticalOptions="CenterAndExpand"
           HorizontalOptions="Center"
           Margin="0,0,0,0">
        <!-- 添加下划线 -->
        <Label.TextDecorations>
            <TextDecorations>Underline</TextDecorations>
        </Label.TextDecorations>
    </Label>
    <Label 
       Text="{Binding TotalDistance}"
       FontSize="Medium"
       FontAttributes="Bold"
       VerticalOptions="CenterAndExpand"
       HorizontalOptions="Center"
       Margin="0,0,0,0"/>
</VerticalStackLayout>

iOS自定义渲染器（修改下划线颜色）：

在iOS项目中添加自定义渲染器，将下划线颜色改为深绿色：

[assembly: ExportRenderer(typeof(Label), typeof(CustomUnderlineLabelRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomUnderlineLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            
            if (Control == null || Element == null) return;
            
            var label = Element;
            if (label.TextDecorations.HasFlag(TextDecorations.Underline))
            {
                var attributedText = new NSMutableAttributedString(Control.Text);
                // 设置下划线颜色为深绿色
                attributedText.AddAttribute(UIStringAttributeKey.UnderlineColor, UIColor.DarkGreen, new NSRange(0, attributedText.Length));
                // 设置下划线样式为单线条
                attributedText.AddAttribute(UIStringAttributeKey.UnderlineStyle, NSNumber.FromInt32((int)NSUnderlineStyle.Single), new NSRange(0, attributedText.Length));
                // 保持文本原有颜色（可根据需求调整）
                attributedText.AddAttribute(UIStringAttributeKey.ForegroundColor, UIColor.Black, new NSRange(0, attributedText.Length));
                
                Control.AttributedText = attributedText;
            }
        }
    }
}

方案2：改用RelativeLayout确保Line与Label尺寸同步 #

通过RelativeLayout直接绑定Line的位置和宽度到Label的对应属性，更精准控制布局：

<RelativeLayout Grid.Row="1" Grid.Column="0">
    <Label x:Name="lblDistanceText"
           Text="Distance"
           FontSize="Medium"
           FontAttributes="Bold"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2}"/>
    
    <Line Stroke="DarkGreen"
          StrokeThickness="3"
          StrokeLineCap="Round"
          Opacity="0.85"
          RelativeLayout.XConstraint="{Binding Source={x:Reference lblDistanceText}, Path=X}"
          RelativeLayout.YConstraint="{Binding Source={x:Reference lblDistanceText}, Path=Y, Converter={StaticResource AddConverter}, ConverterParameter=25}"
          RelativeLayout.WidthConstraint="{Binding Source={x:Reference lblDistanceText}, Path=Width}">
        <Line.Shadow>
            <Shadow Brush="DarkGreen"
                    Offset="0,0"
                    Radius="6"
                    Opacity="0.9" />
        </Line.Shadow>
    </Line>
    
    <Label 
       Text="{Binding TotalDistance}"
       FontSize="Medium"
       FontAttributes="Bold"
       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}"
       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"/>
</RelativeLayout>

注意：需要添加一个AddConverter用于计算Line的Y位置（将Label的Y坐标加上文本高度）：

public class AddConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double y && double.TryParse(parameter.ToString(), out double addValue))
        {
            return y + addValue;
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在XAML资源中声明转换器：

<ContentPage.Resources>
    <local:AddConverter x:Key="AddConverter"/>
</ContentPage.Resources>

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