Question

我试图创建一个像这样的UI（作为参考）。

但是我在设计时遇到了麻烦。我使用了网格，但一直得到这个结果。我将网格行定义设置为80 *和20 *，但仍然没有得到想要的结果。我的想法是按百分比而不是设定特定的高度进行设计。如果我不能使用百分比，是否可以使UI对不同的屏幕尺寸和方向做出响应？有什么办法可以做到这一点？

这是我的XAML代码：

<ContentPage.Content>
    <ScrollView>
        <StackLayout Spacing="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="80*"/>
                    <RowDefinition Height="20*"/>
                </Grid.RowDefinitions>
                <StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                        <Label StyleClass="brand" Text="TBS">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label StyleClass="startpagetitle" Text="TBS Point of Sale">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                    </StackLayout>
                </StackLayout>
                <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Button StyleClass="btn" Text="Login" x:Name="btnLogin">
                        <Button.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                            </OnPlatform>
                        </Button.FontFamily>
                    </Button>
                </StackLayout>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

Answer 1

删除内容网格之外的StackLayout。网格不会占用StackLayout的整个空间，因此看起来百分比是错误的：

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label StyleClass="brand" Text="TBS">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagetitle" Text="TBS Point of Sale">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
            </StackLayout>
        </StackLayout>
        <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Button StyleClass="btn" Text="Login" x:Name="btnLogin">
                <Button.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                    </OnPlatform>
                </Button.FontFamily>
            </Button>
        </StackLayout>
    </Grid>
</ScrollView>

此外，如果您不希望屏幕滚动，我认为也可以删除滚动视图。

或者您可以尝试添加<Grid VerticalOptions="FillAndExpand">，以使网格充满StackLayout。

如何正确设置GRID的高度？

1 个答案: