1

不同布局的預覽如下：

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"AbsoluteLayout.LayoutBounds="0, 20, 200, 5" /><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="10, 0, 5, 65" /><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="20, 0, 5, 65" /><Label Text="Stylish Header"FontSize="24"AbsoluteLayout.LayoutBounds="30, 25" /><BoxView Color="Black"AbsoluteLayout.LayoutBounds="0.5,1,100,25"AbsoluteLayout.LayoutFlags="PositionProportional" /><Label Text="Centered text"AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"AbsoluteLayout.LayoutFlags="PositionProportional" /></AbsoluteLayout></ContentPage>

注意：AbsoluteLayout.LayoutBounds（x,y,w,h）當設置為百分比時
????????x表示應該在控件左側的剩余空間百分比（即實際位置X=x*(父寬度?- 控件寬度)）
????????y表示應該在控件頂部的剩余空間百分比（即實際位置Y=y*(父高度 - 控件高度)）
????????width是控件的寬度，以父寬度的百分比表示
????????height是控件的高度，以父高度的百分比表示

RelativeLayout：相對布局，以某個位置為基點的布局，允許創建跨設備大小按比例縮放的 UI，能夠定位子元素。也可以按比例布局。
指令說明起來比較麻煩，直接上代碼+注釋了，比絕對布局更麻煩了一點，但是思路是相似的。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="XamarinApp1.MainPage"><RelativeLayout Margin="20" HorizontalOptions="Center" WidthRequest="300"><!--絕對值1--><BoxView Color="red"RelativeLayout.XConstraint="0"RelativeLayout.YConstraint="10"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--絕對值2--><BoxView Color="Chocolate"RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=20}"RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=20}"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--基于父對象，絕對值偏移--><BoxView Color="DarkGreen"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-150}"RelativeLayout.YConstraint="30"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--基于父對象，比例偏移(并創建ViewBox基準)--><BoxView x:Name="ViewBox"Color="Silver"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"RelativeLayout.YConstraint="40"RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}"RelativeLayout.HeightConstraint="50" /><!--基于View對象的偏移--><BoxView Color="Black"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ViewBox,Property=X, Constant=10}"RelativeLayout.YConstraint="50"RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ViewBox,Property=Width, Factor=1.5}"RelativeLayout.HeightConstraint="5" /></RelativeLayout></ContentPage>

如果還有疑問，直接看官方文檔吧Xamarin.Forms RelativeLayout - Xamarin | Microsoft Docs

Grid：網格，可以跨行，均勻布局基礎上，可以合并行、列進行布局。也可以嵌套Grid對象。
示例：

<!--創建一個間距5,0的3x3網格--><Grid RowSpacing="5"ColumnSpacing="0"ColumnDefinitions="Auto, *, 100"><!--Auto表示會隨需求變換大小--><!--空和* 表示剩余空間的一個權重，如下則是占比分別為 1:2:1--><Grid.RowDefinitions><RowDefinition/><RowDefinition Height="2*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Label HorizontalOptions="Center"VerticalOptions="Center"Text="位置(0,0)"Grid.Row="0" Grid.Column="0"TextColor="White"BackgroundColor="Blue" /><BoxView Color="Silver"HeightRequest="0"Grid.Row="0" Grid.Column="1" /><BoxView Color="Teal"Grid.Row="1" Grid.Column="0" /><Label Text="中心"Grid.Row="1" Grid.Column="1"TextColor="Purple"BackgroundColor="Aqua"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /><Label Text="跨行"Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"TextColor="Yellow"BackgroundColor="Blue"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /><Label Text="跨列"Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"TextColor="Blue"BackgroundColor="Yellow"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /></Grid>

FlexLayout：彈性布局，說明篇幅比較長，可以認為是二維的StackLayout，嵌套比較靈活。
允許FlexLayout自身嵌套，自適應布局等。

比如嵌套：

<FlexLayout Direction="Column"><!-- Header --><Label Text="HEADER"FontSize="Large"BackgroundColor="Aqua"HorizontalTextAlignment="Center" FlexLayout.AlignSelf="Center"/><!-- Body --><FlexLayout FlexLayout.Grow="1"><!-- Content --><Label Text="CONTENT"FontSize="Large"BackgroundColor="Gray"HorizontalTextAlignment="Center"VerticalTextAlignment="Center"FlexLayout.Grow="1" /><!-- Navigation items--><BoxView FlexLayout.Basis="50"FlexLayout.Order="-1"Color="Blue" /><!-- Aside items --><BoxView FlexLayout.Basis="50"Color="Green" /></FlexLayout><!-- Footer --><Label Text="FOOTER"FontSize="Large"BackgroundColor="Pink"HorizontalTextAlignment="Center" /></FlexLayout>

比如還有實現自適應滾動布局(橫、縱)，內容自動對齊，目錄，等。

對具體實現去官方文檔底下看視頻教程，或者下載demo自己動手點一點。
地址：The Xamarin.Forms FlexLayout - Xamarin | Microsoft Docs

?
ScrollView：滾動布局，顧名思義，能滾動的視圖。ScrollView對象只允許一個子對象，且不應提供其他同級滾動控件。

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:XamlNamedColorSamples"x:Class="XamlNamedColorSamples.MainPage"><AbsoluteLayout ><ScrollViewAbsoluteLayout.LayoutBounds="0,0,1,0.6"AbsoluteLayout.LayoutFlags="All"><StackLayout BindableLayout.ItemsSource="{x:Static local:NamedColor.All}"><BindableLayout.ItemTemplate><DataTemplate><StackLayout Orientation="Horizontal"><BoxView Color="{Binding Color}"HeightRequest="32"WidthRequest="32"VerticalOptions="Center" /><Label Text="{Binding FriendlyName}"FontSize="24"VerticalOptions="Center" /></StackLayout></DataTemplate></BindableLayout.ItemTemplate></StackLayout></ScrollView><ScrollViewAbsoluteLayout.LayoutBounds="0,1,1,0.5"AbsoluteLayout.LayoutFlags="All"BackgroundColor="#40ffff00"></ScrollView></AbsoluteLayout> </ContentPage>

直接跑會提示找不到NamedColor定義，官網代碼demo也是缺的，這玩意在代碼示例的“XamlSamples”工程里有個NamedColor.cs的文件，里面定義的NamedColor。為了方便我這里也直接附上代碼，記得吧名稱空間改成你自己的

using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Xamarin.Forms;namespace XamlSamples {public class NamedColor{// Instance members.private NamedColor(){}public string Name { private set; get; }public string FriendlyName { private set; get; }public Color Color { private set; get; }// Static members.static NamedColor(){List<NamedColor> all = new List<NamedColor>();StringBuilder stringBuilder = new StringBuilder();// Loop through the public static fields of the Color structure.foreach (FieldInfo fieldInfo in typeof (Color).GetRuntimeFields ()){if (fieldInfo.IsPublic && fieldInfo.IsStatic &&fieldInfo.FieldType == typeof (Color)){// Convert the name to a friendly name.string name = fieldInfo.Name;stringBuilder.Clear();int index = 0;foreach (char ch in name){if (index != 0 && Char.IsUpper(ch)){stringBuilder.Append(' ');}stringBuilder.Append(ch);index++;}// Instantiate a NamedColor object.NamedColor namedColor = new NamedColor{Name = name,FriendlyName = stringBuilder.ToString(),Color = (Color)fieldInfo.GetValue(null)};// Add it to the collection.all.Add(namedColor);}}all.TrimExcess();All = all;}public static IEnumerable<NamedColor> All { private set; get; }} }

總結

以上是生活随笔為你收集整理的Xamarin 跨平台应用开发（4）—— 页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。