Xamarin.Forms/UI：如何在 2 个布局之间垂直对齐项目

Question

我在一个 Xamarin.Forms 应用程序上工作，该应用程序使用：

• 包含背景颜色和一些项目（头像、文本）的标题
• 包含背景图像和一些按钮的页脚
• 在 2 个标题之间，我想显示另一个按钮，它在 2 个容器之间很好地对齐

预期的结果是这样的原型：

我能够大致实现这一点，但并不完美：这在 iPhone 6 上运行良好，但在 iPhone X 上却不完全。

XAML 代码如下所示：

<RelativeLayout>

    <Image Source="background.png" 
           Opacity="0.25" Aspect="AspectFill"                  
           RelativeLayout.WidthConstraint=
               "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
               "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

    <Grid x:Name="Header"
          BackgroundColor="{StaticResource BlueColor}"
          RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.55, Constant=0}">

        <StackLayout ... />
    </Grid>

    <Grid RelativeLayout.YConstraint=
              "{ConstraintExpression Type=RelativeToView, ElementName=Header, Property=Height, Factor=0.90}"
          RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.45, Constant=0}}">


        <StackLayout Spacing="5" Padding="25,10,25,10"
                     VerticalOptions="StartAndExpand"
                     RelativeLayout.WidthConstraint=
                        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                     RelativeLayout.HeightConstraint=
                        "{ConstraintExpression Type=RelativeToParent, Property=Height}">

            <Button Style="{DynamicResource CustomButton}" 
                    BackgroundColor="{StaticResource OrangeColor}" 
                    VerticalOptions="End" HorizontalOptions="FillAndExpand" 
                    Margin="30,0,30,0"/>

            //...
        </StackLayout>
    </Grid>
</RelativeLayout>

主容器是RelativeLayout。我将Image 设置为背景 此布局的图像。然后我有一个 StackLayout 作为包含头像和用户详细信息的标题，还有一个包含按钮的 StackLayout。

这是一个好方法吗？或者有没有更好的方法将橙色按钮放在两个布局之间？

Answer 1

就 Xamarin.Forms 的布局技巧而言，这里有一些不错的技巧 -> Jason Smith's Xamarin Forms Performance Tips。

如果不查看所有代码，很难完全理解您的布局要求，但您可以简单地使用具有 2 行的 Grid 作为根/外部容器。顶部内容在第一行，底部内容在第二行，中间的按钮跨越两行并且垂直居中：

<Grid RowSpacing="0">

    <Grid.RowDefinitions>
        <RowDefinition /> <!-- can adjust height based on needs -->
        <RowDefinition /> <!-- can adjust height based on needs -->
    </Grid.RowDefinitions>

    <!-- background image -->
    <Image x:Name="backgroundImage" Grid.RowSpan="2" 
           BackgroundColor="#EFEFEF" />

    <Grid x:Name="topContent" Grid.Row="0" 
          BackgroundColor="#20d1e0">
        <!-- top content here -->
    </Grid>

    <!-- middle button -->
    <Button x:Name="orangeButton" Grid.RowSpan="2" 
            BackgroundColor="#fda601" 
            HorizontalOptions="Center"
            Text="History"
            TextColor="White"
            VerticalOptions="Center" />

    <Grid x:Name="bottomContent" Grid.Row="1">
        <!-- bottom content here -->
    </Grid>

</Grid>

---

不均匀行更新

<Grid RowSpacing="0">

    <Grid.RowDefinitions>
        <RowDefinition Height="0.6*" /> <!-- can adjust height based on needs -->
        <RowDefinition Height="30" /> <!-- half the size of the orange button -->
        <RowDefinition Height="30" /> <!-- half the size of the orange button -->
        <RowDefinition Height="0.4*" /> <!-- can adjust height based on needs -->
    </Grid.RowDefinitions>

    <!-- background image -->
    <Image x:Name="backgroundImage" Grid.RowSpan="4" 
           BackgroundColor="#EFEFEF" />

    <Grid x:Name="topContent" Grid.Row="0" Grid.RowSpan="2"
          BackgroundColor="#20d1e0">
        <!-- top content here -->
    </Grid>

    <!-- middle button -->
    <Button x:Name="orangeButton" Grid.Row="1" Grid.RowSpan="2" 
            BackgroundColor="#fda601" 
            HorizontalOptions="Center"
            Text="History"
            TextColor="White"
            VerticalOptions="Center" />

    <Grid x:Name="bottomContent" Grid.Row="2" Grid.RowSpan="2">
        <!-- bottom content here -->
    </Grid>

</Grid>