为什么.NET MAUI Grid 没有垂直延伸

问题描述 投票:0回答:1

我正在尝试为我的应用程序添加一个欢迎屏幕,它由一个标题标签、2 个垂直排列的按钮和一个用于保存最近编辑的文件的框架组成。元素被添加到网格中,但由于某种原因,网格仅占用大约 50% 的可用垂直空间。

UI 的 XAML 降价:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BXMT.MainPage"
             Shell.NavBarIsVisible="False">

    <VerticalStackLayout Spacing="25">
        <Grid VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.ColumnSpan="2" Grid.Row="1" 
                Text="Title Label" HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center" Padding="0,20,0,20"
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" />
            <Frame Grid.Row="2" Grid.RowSpan="2"
                BorderColor="LightGray" BackgroundColor="Transparent"
                VerticalOptions="FillAndExpand" Margin="20">
            </Frame>
            <StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" 
                Padding="30" Spacing="20"
                Margin="40" VerticalOptions="FillAndExpand">
                <Button Text="Button 1" />
                <Button Text="Button 2" />
            </StackLayout>
        </Grid>
    </VerticalStackLayout>

</ContentPage>

网格最终在动态预览中的外观如何:

我尝试将 Grid 的 VerticalOptions 显式设置为 FillAndExpand 但没有给出任何积极的结果

xaml maui
1个回答
0
投票

经过我的测试,代码中的VerticalStackLayoutGrid的布局有冲突。

您可以删除

<VerticalStackLayout>
并调整 Grid 的
Rowdefinitions
columndefinitions
以获得所需的布局:

<Grid ...>
    <Gird.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
</Gird.RowDefinitions>
...
© www.soinside.com 2019 - 2024. All rights reserved.