「Flutter应用开发教程」-第一个Flutter应用程序 应用开发中我们经常会对多个组件进行按行或列的方式进行布局，比如将姓名标签和输入框放置在一行，之后下一行又放置密码标签和密码输入框，最后提供一行放置登录按钮。如果需要在Flutter界面中实现这样的效果，我们需要使用一种专门的组件---称之为布局组件。最为常用的布局组件为水平布局组件和垂直布局组件，分别对应Row组件和Column组件，本文将重点介绍这两个组件的用法。 水平布局是指将多个组件以行为单位按照水平方向依次进行排列。在Flutter中水平布局组件的名称是Row，在使用Row组件的时候，我们需要指定其布局方向（文字方向），可以是自左向右方向，也可以是自右向左的方向。下图1中第5行代码设置布局方向为自左至右，之后第7-12行代码通过设置Row函数的参数children，指定需要进行布局的子组件数组。 图1 上图1中，我们创建了6个Container组件，每一个组件的宽度和高度都是48，但颜色值各不相同，使用Row组件进行布局后，第一个子组件位于Row组件内的最左边，之后的每一个组件依次向右进行排列，最后的显示效果如下图2所示。 图2 Row组件在进行布局其子组件时，可以设置cross方向的对其方式，其默认值为居中对齐，如图2所示，我们可通过设置crossAxisAlignment参数将每一个组件的高度值设置为屏幕高度，如下图3中第6行代码所示。 图3 图3中的代码相比于图1中的代码，只是多了第6行的内容，那么新的代码对应的界面显示效果如下图4所示。 图4 垂直布局是指将组件以列为单位按照垂直方向依次进行排列。我们按照水平布局的方式，将布局组件改为垂直布局组件Column创建界面，如下图5所示，界面中的子组件个数和大小与上一节内容完全一致，其对应的显示效果如图6所示。 图5 图6中每一个子组件都位于屏幕的水平居中位置，这是因为Column组件的crossAxisAlignment的缺省值也是水平居中，因此，整个列组件在水平方向上显示在中心位置上。 图6 对于列布局组件来说，它同样可以设置每一个子组件在其cross方向上的对齐方式，下图7中第22行代码将其子组件在cross方向上设置为整个屏幕宽度，这样的话，在第19行代码中所设置的width参数将会被忽略。 图7 图7中我们生成子组件列表的操作是通过第12-19行代码实现的，它通过一个含有6个颜色值数组，并调用其map方法，将每一个颜色值构建为对应颜色的Container对象，最后调用toList方法将其转换为一个元素类型为Container的列表对象cells，第23行代码通过children参数其设置为Column对象的子组件集合，它的显示效果如下图8所示。 图8 通过使用列布局，我们可以构建出一个含有标题和内容的布局页面，如图10所示，顶部红色区域表示页面的标题区域，底部绿色区域表示内容区域。 图9 图9为这个布局的对应代码，第17行代码使用了一个新的组件Expanded，它能够将Row和Column组件的子组件扩展至整个可用区域。 图10 图9中第17行代码将第二个子组件包含至Expanded组件内，那么，第二个组件就会占据除了第一个组件之外的所有可用空间，如图10绿色显示区域所示。 水平布局组件Row和Column组件可以相互进行嵌套使用，可以位于界面树中的任意合法位置，同时它们也可以包括任意的子组件。这样我们就可以使用Row和Column组件相互嵌套而制作出十分丰富的展示页面。 这种布局为界面设计中经常使用的一种布局方式，其顶部和底部区域的高度为固定值，中部区域内容随着屏幕的高度可以进行自动调整。我们在上一节的内容中介绍了Expanded组件，它可以占据剩余的可用空间区域，我们通过设置顶部和底部区域高度为固定值，中部区域为Expanded组件就可以达到这样的效果。图11中第16和18行代码分别设置了顶部和底部组件为Container对象，并将它们的高度值设置为48，第17行代码使用了Expanded组件，其最终的效果为图12所示。 图11 图12 底部导航栏布局采用了与上一节相同的整体布局，所不同的是在这个布局中底部区域增加了一个导航区域，导航组件嵌入至底部区域用于控制内容的切换。其效果如图14所示。 图13 图13中第16行代码为顶部红色区域组件，其高度值为48；第17行代码为中部绿色区域组件，它占据了整个屏幕的剩余空间；第18-23行代码为底部导航组件。其最外层为一个Container组件，它用来设置底部区域的高度，其值为48。第19行代码为一个嵌套Row组件，它实现了底部三个导航区域的布局功能，在这个Row组件中，我们使用了三个Expanded组件。我们之前只使用过一个Expanded组件，表示这一个Expanded组件会占据所有的可用空间，如果是多个Expanded组件，那么各个Expanded组件会均分可用的界面空间，因此底部的三个导航块的宽度分别占据整个屏幕宽度的1/3。 图14 双导航布局是指底部和左侧边栏都会出现导航区域，左侧边栏的导航区域控制一级内容，底部导航区域控制二级内容。这个布局相对于上一个布局，又多了一层布局，最外层为Row组件，它实现了左侧导航区域与右侧内容区域的布局。图15中第13行代码为整个内容的Row组件，第17-23行代码为左侧导航区域，第22-40行代码为右侧内容区域。右侧内容区域的布局与上一节采用的导航布局完全相同，在这里不再重复描述了。 图15 通过这个例子我们可以发现，随着布局的复杂程度增加，其使用的组件个数会逐步增加。在布局时我们可以采用“从外到内”的方式一层一层地进行展示，也可以采用“从内到外”的方式分步进行实现，最终都是可以达到所期望的布局效果。 图16 本文通过介绍Flutter常用布局组件Row和Column的用法，首先从最为基本的方式使用Row或Column组件，按照行或列的方式布局多个子组件，之后又通过Row和Column组件进行嵌套使用，实现了常用的几种界面布局方式，从代码量和实现难易程度来看，Flutter的界面设计还是很直观化，这种声明式的界面构建方式可以大大提高开发效率。水平布局组件Row
垂直布局Column
嵌套布局
头部-内容-底部布局
底部导航栏
双导航布局
总结