Question

我正在处理示例应用程序，我从UI开始。我用自定义对话框创建了一个页面。所以我使用绝对布局。我认为我的绝对布局存在填充问题。正如您在下图中所看到的，红色是我的绝对布局，绿色是表格。如何固定布局，使版本和注册号位于屏幕的边缘？

这是我的代码：

<ContentPage.Content>
    <AbsoluteLayout StyleClass="dialogbox" Padding="0" Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout BackgroundColor="Red" Padding="0" Margin="0" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
            <ScrollView>
                <StackLayout BackgroundColor="Green">
                    <StackLayout VerticalOptions="Start" Spacing="0" StyleClass="headingcontainer">
                        <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="loginpagetitle" Text="Welcome">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Heavy.ttf#SFProDisplay-Heavy"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label StyleClass="loginpagesubtitle" Text="to TBS POS app, please login to continue">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                    </StackLayout>
                    <StackLayout StyleClass="logincontainer" VerticalOptions="CenterAndExpand">
                        <Label StyleClass="formlabel" Text="Username">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Entry StyleClass="formcontrol" Placeholder="Username" x:Name="entUsername">
                            <Entry.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                                </OnPlatform>
                            </Entry.FontFamily>
                        </Entry>
                        <Label StyleClass="formlabel" Text="Password">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Entry StyleClass="formcontrol" Placeholder="Password" IsPassword="True" x:Name="entPassword">
                            <Entry.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                                </OnPlatform>
                            </Entry.FontFamily>
                        </Entry>
                        <Button StyleClass="btn" Text="Login" CornerRadius="25" x:Name="btnLogin" Clicked="BtnLogin_Clicked">
                            <Button.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                                </OnPlatform>
                            </Button.FontFamily>
                        </Button>
                    </StackLayout>
                    <StackLayout StyleClass="versioncontainer" VerticalOptions="End">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40*"/>
                                <ColumnDefinition Width="60*"/>
                            </Grid.ColumnDefinitions>
                            <Label x:Name="lblVersion" Grid.Row="0" Grid.Column="0" StyleClass="versionlabel">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                            <Label x:Name="lblRegistration" Grid.Row="0" Grid.Column="1" StyleClass="versionlabel" HorizontalTextAlignment="End">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </Grid>
                    </StackLayout>
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </AbsoluteLayout>
</ContentPage.Content>

Answer 1

您可以在ScrollView中使用Grid并根据比例划分列。

尝试一下：

<AbsoluteLayout
        StyleClass="dialogbox"
        Padding="0"
        Margin="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">
        <ScrollView
            BackgroundColor="Red"
            Padding="0"
            Margin="0"
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
            AbsoluteLayout.LayoutFlags="All">
            <Grid
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition
                        Height="45*" />
                    <RowDefinition
                        Height="45*" />
                    <RowDefinition
                        Height="10*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition
                        Width="100*" />
                </Grid.ColumnDefinitions>
                <StackLayout
                    VerticalOptions="StartAndExpand"
                    Spacing="0"
                    BackgroundColor="Green"
                    Grid.Row="0"
                    StyleClass="headingcontainer">
                    <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="loginpagetitle"
                        Text="Welcome">
                        <Label.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Heavy.ttf#SFProDisplay-Heavy" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                    <Label
                        StyleClass="loginpagesubtitle"
                        Text="to TBS POS app, please login to continue">
                        <Label.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Light.ttf#SFProDisplay-Light" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                </StackLayout>
                <StackLayout
                    Grid.Row="1"
                    BackgroundColor="Blue"
                    StyleClass="logincontainer"
                    VerticalOptions="FillAndExpand">
                    <Label
                        StyleClass="formlabel"
                        Text="Username">
                        <Label.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                    <Entry
                        StyleClass="formcontrol"
                        Placeholder="Username"
                        x:Name="entUsername">
                        <Entry.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular" />
                            </OnPlatform>
                        </Entry.FontFamily>
                    </Entry>
                    <Label
                        StyleClass="formlabel"
                        Text="Password">
                        <Label.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                    <Entry
                        StyleClass="formcontrol"
                        Placeholder="Password"
                        IsPassword="True"
                        x:Name="entPassword">
                        <Entry.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular" />
                            </OnPlatform>
                        </Entry.FontFamily>
                    </Entry>
                    <Button
                        StyleClass="btn"
                        Text="Login"
                        CornerRadius="25"
                        x:Name="btnLogin">
                        <Button.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String">
                                <On
                                    Platform="Android"
                                    Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular" />
                            </OnPlatform>
                        </Button.FontFamily>
                    </Button>
                </StackLayout>
                <StackLayout
                    BackgroundColor="Lime"
                    Grid.Row="2"
                    StyleClass="versioncontainer"
                    VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition
                                Width="40*" />
                            <ColumnDefinition
                                Width="60*" />
                        </Grid.ColumnDefinitions>
                        <Label
                            x:Name="lblVersion"
                            Grid.Row="0"
                            Grid.Column="0"
                            StyleClass="versionlabel">
                            <Label.FontFamily>
                                <OnPlatform
                                    x:TypeArguments="x:String">
                                    <On
                                        Platform="Android"
                                        Value="SFProDisplay-Light.ttf#SFProDisplay-Light" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label
                            x:Name="lblRegistration"
                            Grid.Row="0"
                            Grid.Column="1"
                            StyleClass="versionlabel"
                            HorizontalTextAlignment="End">
                            <Label.FontFamily>
                                <OnPlatform
                                    x:TypeArguments="x:String">
                                    <On
                                        Platform="Android"
                                        Value="SFProDisplay-Light.ttf#SFProDisplay-Light" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                    </Grid>
                </StackLayout>
            </Grid>
        </ScrollView>
    </AbsoluteLayout>

如何修复绝对布局UI？

1 个答案: