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

Posted 2023-03-05

【中文标题】Xamarin.Forms/UI：如何在 2 个布局之间垂直对齐项目

【英文标题】：Xamarin.Forms/UI: how align vertically an in item just between 2 layouts

【发布时间】：2018-12-29 13:56:02

【问题描述】：

我在一个 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。

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

【参考方案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>

【讨论】：

嗨@gannaway，如果行的高度相同，您的解决方案效果很好，但这不是我的情况（大约是 60% / 40%）。那么我怎样才能使您的解决方案适应这种情况呢？

只需设置行定义以满足您的需求。对于基于百分比，<RowDefinition Height="0.6*" /> <RowDefinition Height="0.4*" /> 。您也可以执行类似<RowDefinition Height="Auto" /> <RowDefinition /> 的操作，其中第一行将自动调整大小，第二行的高度将填满剩余的屏幕空间。

是的，我已经这样做了，但在这种情况下，OrangeButton 在两行之间没有“对齐”。

啊，我明白了，我试试看