将按钮与没有 ListView 间隔的 Xamarin.Forms 网格底部对齐

Posted 2023-03-17

【中文标题】将按钮与没有 ListView 间隔的 Xamarin.Forms 网格底部对齐

【英文标题】：Align Buttons to Bottom of Xamarin.Forms Grid without ListView Spacer

【发布时间】：2021-07-03 06:25:13

【问题描述】：

我正在制作一个简单的详细信息屏幕，其中提供了一些列表项详细信息以及删除该项目的选项。它有一个 StackLayout 用于显示项目详细信息，还有两个 Buttons 用于导航或删除。

我已经设法将两个Buttons 沿其父Grid 的底部对齐，方法是使用一个空的ListView 作为垂直分隔符（注意ListView 的Grid.Row 的RowDefinition.Height设置为*):

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <StackLayout>
        <Label Text="Binding TextLabel" FontSize="Medium" />
        <Label Text="Binding Text" FontSize="Small" />
        <Label Text="Binding DescriptionLabel" FontSize="Medium" />
        <Label Text="Binding Description" FontSize="Small" />
    </StackLayout>
    <ListView Grid.Row="1" />
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button
            Text="Binding BackButton"
            Command="Binding BackCommand" />
        <Button
            Grid.Column="1"
            Text="Binding DeleteButton"
            Command="Binding DeleteCommand"/>
    </Grid>
</Grid>

虽然这行得通，但感觉就像是在滥用 ListView。理想情况下，我想完全删除<ListView Grid.Row="1" />，并让第一行中的StackLayout 尽可能多地展开，以便将最后一行中的Button Grid 一直推到底部屏幕。如果StackLayout 无法扩展，我想我也可以将Button Grid 向上扩展。

如此简短而甜蜜，我怎样才能摆脱虚假的ListView 间隔，而我的Buttons 仍然在屏幕底部？

【问题讨论】：

我无法重现，删除 ListView 后按钮仍在底部

使用 XF v4.2.0。关于整个页面，上面的Grid是一个ContentView的内容，它本身就是另一个ContentView的内容，它是一个填充的StackLayout的唯一占用者，最后是一个@的内容987654345@。希望这些都不重要，很可能只是我拥有的 XF 版本有问题（但目前坚持使用它：-/）。

简单地做第一行Height="*"?

我确实尝试过，但它对我不起作用。这对你的情况有效吗？

【参考方案1】：

您可以更改如下代码。我在没有列表视图的情况下进行了测试。

更改：

<Grid Grid.Row="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button
        Text="Binding BackButton"
        Command="Binding BackCommand" />
    <Button
        Grid.Column="1"
        Text="Binding DeleteButton"
        Command="Binding DeleteCommand"/>
</Grid>

收件人：

 <StackLayout
        Grid.Row="1"
        Orientation="Horizontal"
        VerticalOptions="End">
        <Button HorizontalOptions="StartAndExpand"  Text="Binding BackButton" Command="Binding BackCommand" />
        <Button HorizontalOptions="EndAndExpand" Text="Binding DeleteButton" Command="Binding DeleteCommand"/>
    </StackLayout>

【讨论】：

感谢您的反馈。这也不起作用。我开始怀疑这是否只是我当前版本的 XF (4.2.0) 中的一个错误。

我检查了 XF4.2。代码仍然有效。检查屏幕截图。 imgur.com/LiulfHd

终于绕回这个。我发现如果直接在ContentPage 中使用，您的解决方案可以工作——在我的ContentPage 中，我用ContentView 的内容替换了ContentView，即上面的Grid。

此外，我可以通过在ContentView 上设置VerticalOptions="FillAndExpand" 来使原始ContentPage/ContentView 设置工作。