Xamarin Forms 相对布局尾随空格答案

【问题标题】：Xamarin Forms Relative Layout trailing spacesXamarin Forms 相对布局尾随空格
【发布时间】：2019-05-11 07:36:44
【问题描述】：

<ContentPage.Content>
    <StackLayout VerticalOptions="Start" HorizontalOptions="Fill">

  <RelativeLayout HeightRequest="100" BackgroundColor="Blue">

    <Image  x:Name="dishImageView" Aspect="AspectFit" BackgroundColor="Maroon" RelativeLayout.YConstraint="10" RelativeLayout.XConstraint="10" RelativeLayout.WidthConstraint="80" RelativeLayout.HeightConstraint="80" Source="pizza1.png" />
    <Label Text="Dominoz Pizza" 
           x:Name="pizzaTitle"
           RelativeLayout.YConstraint="10"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName= dishImageView,
                                                                Constant=20,
        Property=Width,
        Factor=1}"/>


         <Label BackgroundColor="Lime" HeightRequest="60" Margin="0,0,20,0" MaxLines="2" LineBreakMode="WordWrap" Text="Dominoz Pixxa is great pizza.. come and eat pizza" 
           x:Name="pizzaDescription"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName=pizzaTitle,
                                                               Constant=10,
           Property= Height, Factor=1}"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName= dishImageView,
                                                                Constant=20,
        Property=Width,
        Factor=1}" 
               />


</RelativeLayout>  
</StackLayout>
</ContentPage.Content>

基本上我来自 iOS 背景。在那里，我们使用前导和尾随空格。我在 Xamarin 表单中看不到任何尾随空格选项....你能帮我设置一下吗...这是我正在尝试实现的示例图像。

这就是我可以通过上面的源代码得到的。

【问题讨论】：

你的意思是LineBreakMode 上Label
是的，类似的...我想设置描述标签右侧应该始终有 20 个空格。并且标签应该分两行
设置<Label Margin="0,0,20,0" MaxLines="2" LineBreakMode="TailTruncation" ... />
我添加了，但它仍然没有出现在两行中
你选择RelativeLayout而不是StackLayouts有什么原因吗？

标签： xamarin.forms

【解决方案1】：

出于性能原因，周围有a few blogs 建议不要使用RelativeLayout，而是使用AbsoluteLayout 和/或StackLayout。我个人不是RelativeLayout 的粉丝，并且会尽可能使用替代品。 RelativeLayout 玩起来也不好玩，而且代码很快就会变得乱七八糟。

您尝试实现的布局确实可以使用RelativeLayout 完成，但我认为使用一系列StackLayouts 会容易得多。例如：

<StackLayout 
    HeightRequest="100" 
    BackgroundColor="Blue"
    Orientation="Horizontal">

    <!-- Image -->
    <Image  
        x:Name="dishImageView" 
        Aspect="AspectFit" 
        BackgroundColor="Maroon" 
        Source="pizza1.png" />

    <!-- Image/Item Description -->
    <StackLayout
        HorizontalOptions="FillAndExpand"
        Orientation="Vertical">
        <Label 
            Text="Dominoz Pizza" 
            x:Name="pizzaTitle"/>

        <Label 
            BackgroundColor="Lime" 
            HeightRequest="60" 
            Margin="0,0,20,0" 
            MaxLines="2" 
            LineBreakMode="WordWrap" 
            Text="Dominoz Pixxa is great pizza.. come and eat pizza" 
            x:Name="pizzaDescription"/>

        <!-- Add the price label here -->

    </StackLayout>

</StackLayout>

【讨论】：

【解决方案2】：

在这里，我终于使用 Grid Concept 实现了它。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="UdemyFirst.PizzaPage">
    <StackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>  

            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>  
            </Grid.RowDefinitions>

            <Image 
                BackgroundColor="Blue" 
                Grid.Row="0"
                Margin="10"
                Grid.Column="0"/>

            <StackLayout 
                BackgroundColor="Fuchsia"
                Grid.Row="0"
                Grid.Column="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>  

                    <Grid.RowDefinitions>
                        <RowDefinition Height="25*"/>  
                        <RowDefinition Height="50*"/> 
                        <RowDefinition Height="25*"/> 
                    </Grid.RowDefinitions>

                    <Label 
                        Text="Pizza"
                        BackgroundColor="Black"
                        Grid.Row="0"
                        Grid.Column="0"
                        TextColor="White"/>

                    <Label 
                        Text="Pizza is very bad. You should not eat Pizza. Pizza is very bad."
                        BackgroundColor="Red"
                        LineBreakMode="WordWrap"
                        MaxLines="2"
                        Grid.Row="1"
                        Grid.Column="0"
                        TextColor="White"/>

                    <Label 
                        Text="10$"
                        BackgroundColor="Green"
                        XAlign="End"
                        Grid.Row="2"
                        Grid.Column="0"
                        TextColor="White"/>
                </Grid>
            </StackLayout>
        </Grid>

    </StackLayout> 
</ContentPage>

【讨论】：