将标签大小调整为换行文本

Question

正在尝试格式化 2 个标签。标签应代表标题和价值。他们应该在右下角有位置。在平板电脑上一切看起来都很好，但在 phone 上需要包装“值”。 space 无法容纳第一行换行文本的地方仍然存在。

最后，文本格式看起来很奇怪。空的 space 文本放不下。在这种情况下，我可以想象第二个标签的大小会根据行中最长文本的大小进行调整...

<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label
            Grid.Column="0"
            BackgroundColor="Bisque"
            FontSize="Medium"
            Text="Version of Co.:"
            HorizontalOptions="EndAndExpand"/>

        <Label
            Grid.Column="1"
            BackgroundColor="BlanchedAlmond"
            HorizontalOptions="End"
            HorizontalTextAlignment="Start"
            FontSize="Medium"
            Text="This is vereverevery longversiontitle."/>
    </Grid>
        
    
</StackLayout>

当我将第二个标签上的 horizontalTextAlignment 设置为“开始”时，结果将如下所示，我将再次出现奇怪的空白 space。

对于不需要换行的短文本，整个布局看起来很好，如我所愿：

更新： 预期行为：

Answer 1

只需在您的网格中再添加一列，

并将label的位置分别改为1、2

<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label
            Grid.Column="1"
            BackgroundColor="Bisque"
            FontSize="Medium"
            Text="Version of Co.:"
            HorizontalOptions="EndAndExpand"/>

        <Label
            Grid.Column="2"
            BackgroundColor="BlanchedAlmond"
            HorizontalOptions="End"
            HorizontalTextAlignment="Start"
            FontSize="Medium"
            Text="This is vereverevery longversiontitle."/>
    </Grid>
        
    
</StackLayout>

Answer 2

设置外层StackLayout的Orientation为Vertical。
将额外的列添加到网格中，并在其上设置准确的宽度值。
将 Label 的 HorizontalTextAlignment 设置为 End。

示例代码

    <StackLayout Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="1"
                BackgroundColor="Bisque"
                FontSize="Medium"
                Text="Version of Co.:"
                HorizontalOptions="EndAndExpand"
                HorizontalTextAlignment="End"/>

            <Label 
                Grid.Column="2"
                BackgroundColor="BlanchedAlmond"    
                HorizontalOptions="End"
                HorizontalTextAlignment="End"
                FontSize="Medium"
                Text="This is vereverevery   longversiontitle."/>
        </Grid>
    </StackLayout>

将标签大小调整为换行文本

Adjust size of label to the wrapped text

css

xaml

xamarin

示例代码