Xamarin.Forms 第05局：布局 上
总目录
前言
本文介绍布局：
一、布局概述
二、StackLayout
三、Grid
四、FlexLayout
环境
1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定：XF代表Xamarin.Forms
内容
一、布局概述
1.布局(Layout)是视图在界面上的规划；(视图指View，XF中控件、布局等派生自View)；
2.XF中主要有以下6种布局：
- StackLayout：栈布局；
- AbsoluteLayout：绝对布局；
- RelativeLayout：相对布局；
- Grid：网格布局；
- FlexLayout：弹性布局；
- ScrollView：滚动视图；
注：下图中没有FlexLayout,它类似于StackLayout
3.下面通过Xaml和C#两种使用方式介绍布局。
二、StackLayout
StackLayout：水平或垂直组织视图。
实现效果
1.垂直方式效果
2.水平方式效果
XAML方式
1.垂直方式
2.水平方式
1.BoxView：显示矩形的控件；
2.StackLayout中，视图之间默认有6px边距，可通过Spacing属性修改，本例设为8px；
3.StackLayout通过Orientation属性改变布局方式：
- 垂直布局：StackOrientation.Vertical
- 水平布局：StackOrientation.Horizontal
C#方式
1.垂直方式
2.水平方式
二、Grid
Grid：通过行和列组织视图。
实现效果
Xaml方式
1.RowSpacing：设置行间距，默认是6px，本例设为4px；
2.ColumnSpacing：设置列间距，默认是6px，本例设为4px；
3.RowDefinitions：定义行数，本例定义了3行；
4.ColumnDefinitions：定义列数，本例定义了2列；
5.行高(Height)和列宽(Width)，可以设为以下选项：
- Auto：自适应大小，即以行或列中的内容为准；
- *：按比例，将剩余空间按比例划分。行高和列宽默认是*；
- 固定值：指定行高或列宽的大小。本例第一行固定为80。
6.Grid.Row：为视图设置行，例如：Grid.Row="0"，即在第0行(一般称首行为第0行)；
7.Grid.Column：为视图设置列，例如：Grid.Column="0"，即在第0列(一般称首列为弟0列)；
8.Grid.RowSpan：设置跨行，例如：Grid.RowSpan="2"，即跨2行；
9.Grid.ColumnSpan：设置跨列，例如：Grid.ColumnSpan=“2”，即跨2列。
C#方式
三、FlexLayout
FlexLayout：通过包装水平或垂直布局组织视图。
可以理解为StackLayout加了包装盒，内容一行放不下时，自动换行显示。
实现效果
Xaml方式
FlexLayout有以下重要属性：
- Direction：按行或按列显示。默认按行显示；
- Wrap：包装方式。如果行或列中子视图内容太多，会自动换行或换列显示；
- AlignContent：内容对齐；
- JustifyContent：设置子视图在行或列上的排列方式。
C#方式
后语
本文介绍布局，下篇继续介绍布局，待续...
