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#方式

后语

本文介绍布局，下篇继续介绍布局，待续...

---

总目录