Xamarin表示相对布局尾随空格

Posted 2021-05-05

<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表单中看到任何尾随空格选项....你能帮助我如何设置这个...这是我试图实现的示例图像。

这是我能够通过上面的源代码获得的。

答案

由于性能原因，有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> 

另一答案

在这里我实现了它最后使用网格概念。

<?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>