Xamarin：如何将ListView中的Label与屏幕右侧对齐？

我正在学习Xamarin，尝试调整Label使其在ListView中与屏幕右侧对齐，但所有尝试均失败。即使到处设置HorizontalOptions属性，Label的表现仍不符合预期，似乎遗漏了某些知识点。

当前显示效果：

期望实现的效果：

感谢@Jason建议添加背景色到Label，方便排查布局问题。

相关代码 #

ProductCard 代码

<Grid xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:models="clr-namespace:Notes.Models;assembly=Notes"
  x:DataType="models:Goods"
  x:Class="Notes.Cells.ProductCard">
<Frame Style="{StaticResource ProductCard}" BackgroundColor="Coral">
    <StackLayout Orientation="Horizontal">
        <StackLayout VerticalOptions="Center">
            <Label
                BackgroundColor="Aqua"
                HorizontalTextAlignment="End"
                VerticalOptions="End"
                HorizontalOptions="End">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="{Binding Name}" Style="{StaticResource LabelMedium}" BackgroundColor="Blue"></Span>
                        <Span Text=" " BackgroundColor ="Brown"/>
                        <Span Text="Price: " BackgroundColor="Green"/>
                        <Span Text="{Binding Price}" FontAttributes="Bold" BackgroundColor="Yellow"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>
    </StackLayout>
</Frame>

ListView 代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:viewmodels="clr-namespace:Notes.ViewModel"
         xmlns:cells="clr-namespace:Notes.Cells"
         xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
         x:DataType="viewmodels:GoodsViewModel"
         x:Class="Notes.Views.ProductsCatalog"
         >
<ContentPage.BindingContext>
    <viewmodels:GoodsViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="Normal">
            <ViewCell>
                <cells:ProductCard/>
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="Special">
            <ViewCell>
                <cells:SpecialItem/>
            </ViewCell>
        </DataTemplate>
        <cells:ItemDataTemplateSelector x:Key="GoodsSelector"
                Normal="{StaticResource Normal}"
                Special="{StaticResource Special}"/>
    </ResourceDictionary>
</ContentPage.Resources>
<ListView
    SeparatorVisibility="Default"
    CachingStrategy="RecycleElement"
    Style="{StaticResource NoteNewsListView}"
    GroupDisplayBinding="{Binding Key}"
    IsGroupingEnabled="True"
    IsRefreshing="{Binding IsBusy, Mode=OneWay}"
    SelectedItem="{Binding CurrentGoods, Mode=TwoWay}"
    ItemsSource="{Binding GoodsGroup}"
    RefreshCommand="{Binding RefreshCommand}"
    ItemTemplate="{StaticResource GoodsSelector}">
    <ListView.Behaviors>
        <xct:EventToCommandBehavior
            Command="{Binding SelectedCommand}"
            EventName="ItemSelected" />
    </ListView.Behaviors>
    <ListView.GroupHeaderTemplate>
        <DataTemplate x:DataType="{x:Null}">
            <ViewCell>
                <StackLayout Padding="0,0,0,0" Margin="10,0,0,0">
                    <Label Style="{StaticResource LabelLarge}" Text="{Binding Key}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.Header>
        <StackLayout Orientation="Horizontal">
            <Label
                Margin="80"
                FontFamily="AC"
                HorizontalOptions="Center"
                Style="{StaticResource LabelLarge}"
                Text="Catalog Products">
            </Label>
        </StackLayout>
    </ListView.Header>
    <ListView.Footer>
        <StackLayout HorizontalOptions="Center" Orientation="Horizontal">
            <Button
                Command="{Binding LoadMoreCommand}"
                Style="{StaticResource ButtonOutline}"
                Text="Load more" />
        </StackLayout>
    </ListView.Footer>
</ListView>

样式代码

<Style x:Key="ServiceCard" TargetType="Frame">
            <Setter Property="HasShadow" 
                    Value="{OnPlatform Android=true, iOS=false, Default=true}"/>
            <Setter Property="CornerRadius" Value="20"/>
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Dark={StaticResource CardBackgroundDark},
                Light={StaticResource CardBackground}}"/>
        </Style>

<Style x:Key="NoteNewsListView" TargetType="ListView">
            <Setter Property="HasUnevenRows" Value="True"/>
            <Setter Property="BackgroundColor" Value="Transparent"/>
            <Setter Property="SeparatorVisibility"
                    Value="None"/>
            <Setter Property="RefreshControlColor"
                    Value="{StaticResource SystemBlue}"/>
            <Setter Property="IsPullToRefreshEnabled"
                    Value="True"/>
        </Style>

解决方案 #

问题出在嵌套的StackLayout没有占用可用的全部宽度，导致Label的HorizontalOptions="End"只在自身的狭小空间内生效，无法对齐到屏幕右侧。需要修改ProductCard中的布局：

1. 给最外层的Horizontal方向StackLayout添加HorizontalOptions="FillAndExpand"，让它占满Frame的全部宽度；
2. 给内层的StackLayout也添加HorizontalOptions="FillAndExpand"，确保它能使用外层StackLayout的全部宽度；
3. 保持Label的HorizontalOptions="End"和HorizontalTextAlignment="End"不变，这样文字会在Label内靠右，同时Label整体对齐到行的右侧。

修改后的ProductCard代码：

<Grid xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:models="clr-namespace:Notes.Models;assembly=Notes"
  x:DataType="models:Goods"
  x:Class="Notes.Cells.ProductCard">
<Frame Style="{StaticResource ProductCard}" BackgroundColor="Coral">
    <!-- 添加 FillAndExpand 让StackLayout占满宽度 -->
    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <!-- 同样添加 FillAndExpand -->
        <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand">
            <Label
                BackgroundColor="Aqua"
                HorizontalTextAlignment="End"
                VerticalOptions="End"
                HorizontalOptions="End">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="{Binding Name}" Style="{StaticResource LabelMedium}" BackgroundColor="Blue"></Span>
                        <Span Text=" " BackgroundColor ="Brown"/>
                        <Span Text="Price: " BackgroundColor="Green"/>
                        <Span Text="{Binding Price}" FontAttributes="Bold" BackgroundColor="Yellow"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>
    </StackLayout>
</Frame>

这样修改后，Label就能对齐到屏幕右侧，达到你期望的效果。

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