Xamarin 跨平台应用开发（4）—— 页面布局

ms_cz_1995

于 2022-07-22 12:28:55 发布

阅读量594

点赞数

分类专栏： Xamarin 文章标签： xamarin

本文链接：https://blog.csdn.net/ms_cz_1995/article/details/125894738

版权

本文详细介绍了Xamarin中的五种页面布局：StackLayout、AbsoluteLayout、RelativeLayout、Grid和FlexLayout。StackLayout为一维堆栈布局，AbsoluteLayout支持绝对定位，RelativeLayout基于相对位置布局，Grid提供行列布局，而FlexLayout则是一种灵活的二维布局。同时，文章提到了ScrollView作为滚动视图的使用，并提醒开发者注意不同布局在不同设备上的表现。

摘要由CSDN通过智能技术生成

不同布局的预览如下：

StackLayout：一维堆栈布局，只能进行横向或纵向布局，允许嵌套。可以理解为行或列为1的Grid

从左到右依次为纵向，横向，嵌套

嵌套部分代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.CombinedStackLayoutPage"
             Title="Combined StackLayouts demo">
    <StackLayout Margin="20">
        ...
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red" />
                <Label Text="Red"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow" />
                <Label Text="Yellow"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue" />
                <Label Text="Blue"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        ...
    </StackLayout>
</ContentPage>

AbsoluteLayout：绝对布局，以左上角为基点的布局，也支持按比例布局。对于Position只要把AbsoluteLayout.LayoutFlags设置为PositionProportional属性，那么Position(x,y)就是比例值，其他所有值视为绝对值，对于X,Y,Width,Height,Position,Size等属性也一样。
最大的特点在于能够定位子类。但是官方文档有个警告

使用绝对了绝对值坐标的话，不同设备的中心坐标可能会偏移，所以需要注意一下。

子级调整和比例布局示例如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinApp1.MainPage">


    <AbsoluteLayout Margin="20">
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
        <BoxView Color="Silver"