「Flutter应用开发教程」-基本布局组件Row和Column
「Flutter应用开发教程」-第一个Flutter应用程序

Stack组件能够让它的子组件使用Stack组件的边界进行布局，这个布局组件支持两中类型的子组件，一类是普通的子组件，另一类是定位子组件。下文我们将通过示例演示如何使用Stack组件进行布局子元素。

普通子组件

对于普通的子组件，Stack布局组件在缺省情况下会从其左上角开始放置子组件，第1个组件放置在最底层，第2个组件放置在第一个组件的上一层，之后每一个新的组件按照这样的放置方式依次放置在前一个组件的上一层。就好比一沓信纸，只不过组件是没有厚度的，但是上一层的组件会覆盖下面的组件。因此为了便于演示，我们将最底层的组件设置为最大的宽度和高度，越接近顶层，组件的宽度和高度会越来越小。图1中使用6种颜色值分别创建了6个组件，第1个组件最大，宽度和高度大小都为6x48，它位于最底层；第2个组件的宽度和高度都为5x48，它会覆盖在第1个组件的部分区域；之后的每一个组件都会覆盖前一个组件的一部分内容，其效果如图2所示。

图1中第13-20行代码定义了一个颜色值数组，第21行代码调用mapIndexed方法将颜色值数组的索引值和颜色值作为参数进行构建Container对象，此方法调用完成之后就构建了一个元素类型为Container的Iterable对象，最后第26行代码调用toList方法将其转换为Container对象列表。第29行代码将containers对象列表作为Stack构造函数的children参数进行构建Stack对象。

图2中我们使用了Stack组件所有的缺省参数进行对子组件的布局，布局是从左上角（Alignment.topStart）开始，我们也可以将子组件从左侧中部或其它位置开始布局，只需要在Stack组件的构造函数中将alignment参数的值设置Alignment.centerLeft，其实现的效果如图3所示。

定位组件

边界停靠定位

Stack布局组件除了使用普通的组件之外，它还可以结合定位组件Positioned来实现更加灵活的布局方式。Positioned组件可以设置其子组件相对于父组件Stack的四个边界距离而达到布局效果。如下图4

图4中第16行代码创建了一个Positioned组件，其子组件为一个宽高值都是48的Container组件，我们在这个Positioned组件中设置top和left参数都为0，那么这个子组件就显示在父组件Stack的左上角位置；第17行代码也创建了同样的Positioned和Contained组件，但这次设置的Positioned参数top和right值为0，那么，第二个组件就显示在Stack父组件的右上角位置；第18行代码依据同样的方法设置bottom和left参数值为0，那么，第三个组件就显示在Stack组件的左下角位置；第19行代码设置了bottom和right参数值为0，它相应地显示在父组件Stack的右下角位置。整个布局的显示效果如图5所示。

边界偏移量定位

在使用Positioned组件时，其设置参数top、bottom、left和right必须保证至少有一个数值不为空值，这样才可以对子组件进行定位。我们除了将子组件进行停靠于Stack父组件的边界之外，这4个参数也是可以指定其它的任何合法数值，比如下图6中，我们实现一个列表条目的界面效果，左侧区域显示头像，右侧区域显示操作按钮，中间部分显示内容，如图8所示。

图7中第18行代码为头像区域的显示组件，我们将Positioned组件的left参数设置为0，将其子组件的宽高都设置为64，那么，这个头像组件就居左显示了；第19行代码为操作按钮组件，这个区域的大小也是64x64，通过将Positioned的right值设置为0，就实现了将其居右的显示效果；最后是对内容区域的布局，由于左右两个区域分别占据了64宽度的空间，那么，内容区域距离左边界的数值为64，距离右边界的数值也是64，通过第20行代码，将Positioned组件的left和right参数都设置为64；这样我们就实现了三个组件占据全部宽度、高度为64的界面布局效果。

圣杯布局

圣杯布局在页面设计中是经常使用的一种布局方式，如图10所示，它分为三个区域，左侧区域、中部区域和右侧区域，中部区域内容自适应，两侧区域宽度为固定值，同时三个区域的高度与整个屏幕高度保持一致。

上一节内容介绍了左、中、右三个区域固定高度的定位方式，对于左侧和右侧区域，我们使用Positioned组件的一个参数对其在一个方向上（left或right）添加了约束，对于中部区域，我们使用了两个参数(left和right)对其在两个方向上添加了约束。圣杯布局与上一个布局所不同的是三个区域的高度值。我们按照Positioned组件的定位功能继续添加顶部和底部约束，将它们的值都设置为0，那么，这三个组件就会占据整个屏幕。图9中第18、第20行和第22行代码分别设置了top和bottom的值都为0。这样对于每一个组件来说，左侧Positioned组件使用了left、top和bottom三个参数，中部Positioned组件使用了left、top、right和bottom四个参数，右侧Positioned组件使用了right、top和bottom三个参数。

总结

Stack组件为Flutter界面布局中常用的组件，可以实现子组件的层叠式布局，也可以借用Positioned组件实现依据边界进行布局，通过设置“上下左右”四个边界的偏移量实现对子组件的定位功能。

「Flutter应用开发教程」-基本布局组件Row和Column
「Flutter应用开发教程」-第一个Flutter应用程序