首页 文章

Xamarin表示相对布局尾随空格

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

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

2 回答

  • 1

    在这里,我最终使用网格概念实现了它 .

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

    由于性能原因,有a few blogs建议不要使用 RelativeLayout ,而是使用 AbsoluteLayout 和/或 StackLayout . 我个人不是 RelativeLayout 的粉丝,并会尝试尽可能使用替代品 . RelativeLayout 玩起来也不好玩,而且代码很快就会变得混乱 .

    您尝试实现的布局确实可以使用 RelativeLayout 完成,但我认为使用一系列 StackLayout 会更容易 . 例如:

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

相关问题