概述
- 单子布局组件
- 多子布局组件
一、单子布局组件
单子布局组件的含义是其只有一个子组件，可以通过设置一些属性设置该子组件所在的位置信息等。
比较常用的单子布局组件有：Align，Center，Padding，Container。
-
1.1、对齐组件
-
1.1.1、对齐介绍
看到Align这个词，我们就知道它有我们的对齐方式有关。
在其他端的开发中（iOS，Android，前端）Align通常只是一个属性而已，但是Flutter中Align也是一个组件。
我们可以通过二进制来看一下Align有一些属性：const Align({ Key key, this.alignment: Alignment.center, // 对齐方式，默认居中对齐 this.widthFactor, // 宽度因子，不设置的情况，会尽可能大 this.heightFactor, // 高度因子，不设置的情况，会尽可能大 Widget child // 要布局的子Widget })提示：这里我们特别解释一下
widthFactor和heightFactor作用：- 因为子组件在父组件中的对齐方式必须有一个合并，就是父组件得知道自己的范围（宽度和高度）；
- 如果widthFactor和heightFactor不设置，那么替换Align会重置的大（替换为自己所在的父组件）；
- 我们也可以对他们进行设置，尺寸widthFactor设置为2，那么相对于Align的宽度是子组件跨度的2倍；也就是是子组件的 几倍
-
1.1.2、对齐代码
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Align( child: Icon(Icons.pets, size: 36, color: Colors.red), alignment: Alignment.bottomRight, widthFactor: 2, heightFactor: 2, ); } }
-
-
1.2、中心组件
-
1.2.1、中心介绍
实际上Center组件继承自Align，只是将alignment设置为Alignment.center。
原始码分析：class Center extends Align { const Center({ Key key, double widthFactor, double heightFactor, Widget child }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child); } -
1.2.2、代码展示
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Icon(Icons.pets, size: 36, color: Colors.red), ); } }
-
-
1.3、填充组件
-
1.3.1、填充介绍
Padding组件在其他端也是一个属性而已，但是在Flutter中是一个小部件，但是Flutter中没有Margin这样一个小部件，这是因为外边距也可以通过Padding来完成。
填充通常用于设置子窗口小部件到父窗口小部件的边距（您可以称为是父组件的内边距或子窗口小部件的外边距）。
原始码分析：const Padding({ Key key, @requiredthis.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets Widget child, }) -
1.3.2、代码展示
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.all(16), child: Text( "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。", style: TextStyle( color: Colors.redAccent, fontSize: 18 ), ), ); } }
-
-
1.4、集装箱组件
Container组件其他其他Android中的View，iOS中的UIView。
如果你需要一个视图，有一个背景颜色，图像，有固定的尺寸，需要一个边框，圆角等效果，那么就可以使用Container组件。-
1.4.1、容器介绍
Container在开发中被使用的频率是非常高的，特别是我们经常替换其作为容器组件。
下面我们来看一下Container有哪些属性：Container({ this.alignment, this.padding, //容器内补白，属于decoration的装饰范围 Color color, // 背景色 Decoration decoration, // 背景装饰 Decoration foregroundDecoration, //前景装饰 double width,//容器的宽度 double height, //容器的高度 BoxConstraints constraints, //容器大小的限制条件 this.margin,//容器外补白，不属于decoration的装饰范围 this.transform, //变换 this.child, })大多数属性在介绍其他容器时都已经介绍过了，不再重复述，但有两点需要说明：
- 容器的大小可以通过width，height属性来指定，也可以通过constraints来指定。实际容器内部会根据width，height来生成一个constraints；
-
color和decoration是互斥的，实际上，当指定color时，容器内会自动创建一个装饰；
-
1.4.2、集装箱代码
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( color: Color.fromRGBO(3, 3, 255, .5), width: 100, height: 100, child: Icon(Icons.pets, size: 32, color: Colors.white), ), ); } }
-
-
1.4.3、Box装潢
Container有一个非常重要的属性decoration：
他对应的类型是装修类型，但是它是一个抽象类。
在开发中，我们经常使用它的实现类BoxDecoration来进行实例化。
BoxDecoration常见属性：const BoxDecoration({ this.color, // 颜色，会和Container中的color属性冲突 this.image, // 背景图片 this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide this.borderRadius, // 圆角效果 this.boxShadow, // 阴影效果 this.gradient, // 渐变效果 this.backgroundBlendMode, // 背景混合 this.shape = BoxShape.rectangle, // 形变 })部分代码：
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( // color: Color.fromRGBO(3, 3, 255, .5), width: 150, height: 150, child: Icon(Icons.pets, size: 32, color: Colors.white), decoration: BoxDecoration( color: Colors.amber, // 背景颜色 border: Border.all( color: Colors.redAccent, width: 3, style: BorderStyle.solid ), // 这里也可以使用Border.all统一设置 // top: BorderSide( // color: Colors.redAccent, // width: 3, // style: BorderStyle.solid // ), borderRadius: BorderRadius.circular(20), // 这里也可以使用.only分别设置 boxShadow: [ BoxShadow( offset: Offset(5, 5), color: Colors.purple, // 模糊度 blurRadius: 5 ) ], // shape: BoxShape.circle, // 会和borderRadius冲突 gradient: LinearGradient( colors: [ Colors.green, Colors.red ] ) ), ), ); } } -
1.4.4、通过Container+BoxDecoration来实现圆角图像
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( width: 200, height: 200, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"), ) ), ), ); } }
二、多子布局组件
在开发中，我们经常需要将多个Widget放在一起进行布局，某些水平方向，垂直方向隔开，甚至有时候需要他们进行分解，其中图片上面放一段文字等；
这个时候我们需要使用多子布局部件（多子布局部件）。
比较常用的多子布局组件是行，列，堆栈，我们来学习一下他们的使用。
-
2.1、Flex 组件(
很少直接使用)
实际上，我们即将学习的Row组件和Column组件都继承自Flex组件。- Flex组件和行，列属性主要的区别就是多一个方向。
- 当direction的增量Axis.horizontal的时候，则是Row。
- 当direction的增量Axis.vertical的时候，则是Column。
在学习
Row和Column之前，我们先学习主轴和交叉轴的概念。
因为行是一行排布，列是一列排布，那么这些都存在两个方向，并且两个小部件分布的方向应该是对立的。
它们彼此都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：- 对于
行(Row)来说，主轴：横着（MainAxis）和交叉轴：竖着（CrossAxis） - 对于
列(Column)而言，主轴：竖着（主轴）和交叉轴：横着（CrossAxis）分别是下图
-
2.2、Row行 组件
-
1>、行介绍
Row组件用于将所有的子控件排成一行，实际上这种布局应该是放置于Web的Flex布局。如果熟悉Flex布局，会发现非常简单。
从源码中查看Row的属性：Row({ Key key, // 主轴对齐方式 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 水平方向尽可能大 MainAxisSize mainAxisSize = MainAxisSize.max, // 交叉处对齐方式 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左）） TextDirection textDirection, // 表示Row纵轴（垂直）的对齐方向 VerticalDirection verticalDirection = VerticalDirection.down, // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选） TextBaseline textBaseline, List<Widget> children = const <Widget>[], })部分属性详细解析
-
主轴尺寸：
- 表示行在主轴（水平）方向占用的空间，
MainAxisSize.max最小是，表示重置多的占用水平方向的空间，此时无论子小物件实际占用多少水平空间，行的宽度始终等于水平方向的最大宽度 - 而
MainAxisSize.min表示缩减少的占用水平空间，当子小部件没有占满水平剩余空间，则行的实际宽度等于所有子小部件所占用的水平空间；
mainAxisAlignment：表示子小部件在行所占用的水平空间内对齐方式
- 表示行在主轴（水平）方向占用的空间，
-
mainAxisAlignment：表示子小部件在行所占用的水平空间内对齐方式
- 如果mainAxisSize变量MainAxisSize.min，则此属性无意义，因为子小部件的宽度等于行的宽度
- 只有当mainAxisSize的增量MainAxisSize.max时，此属性才赋值
- MainAxisAlignment.start表示沿textDirection的初始方向对齐，
- 如textDirection为取值TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection为取值TextDirection.rtl时表示从右对齐。
- 而MainAxisAlignment.end和MainAxisAlignment.start正好相反；
- MainAxisAlignment.center表示居中对齐。
提示：mainAxisAlignment
- start: 主轴的开始位置挨个摆放元素
- end: 主轴结束位置挨个摆放元素
- center: 主轴的中心点对齐
- spaceBetween: 左右两边的距离为 0，其他元素之间平分间距
- spaceAround: 左右两边的距离是其他元素之间的距离的一半
- spaceEvenly: 所有的间距平分空间
-
crossAxisAlignment：表示子控件在纵轴方向的对齐方式
- Row的高度等于子Widgets中最高的子元素高度
- 它的取值和MainAxisAlignment一样（包含start，end，center三个值）
- 不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection转换
VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection转换VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
提示：crossAxisAlignment
- start: 交叉轴的起始位置对齐
- end: 交叉轴的结束为止对齐
- center: 中心点对齐(没默认值)
- stretch: 基线对齐(必须有文本的时候才起效果)
- baseline: 先Row占据交叉轴尽可能大的空间，将左所有的子Widget交叉轴的高度，拉伸到最大
-
2>、示例代码
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.max, children: <Widget>[ Container(color: Colors.red, width: 60, height: 60), Container(color: Colors.blue, width: 80, height: 80), Container(color: Colors.green, width: 70, height: 70), Container(color: Colors.orange, width: 100, height: 100), ], ); } } -
3>、mainAxisSize
默认情况下，行会重新覆盖多的宽度，让子小部件在其中进行排布，这是因为mainAxisSize属性替换值是MainAxisSize.max。
我们来看一下，如果这个值被修改为MainAxisSize.max会什么变化：
MainAxisSize.min
-
-
4>、Expanded 展开式
如果我们希望红色和黄色的容器Widget不要设置固定的宽度，而是替换剩余的部分，这个时候应该如何处理呢？
这个时候我们可以使用Expanded来包装Container Widget，并且将其的宽度不设置值，我们可以看到下图多余的空间被红色和黄色的部分分了-
flex属性，弹性系数，Row会根据两个展开的弹性系数来决定它们剩下多少空间的比例
截屏2020-05-15 下午5.03.15.png
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: <Widget>[ Expanded( flex: 1, child: Container(color: Colors.red, height: 60), ), Container(color: Colors.blue, width: 80, height: 80), Container(color: Colors.green, width: 70, height: 70), Expanded( flex: 1, child: Container(color: Colors.orange, height: 100), ) ], ); } }
-
-
-
2.3、Column 列组件
列组件用于将所有的子控件排成一列，学会了前面的行后，列只是和行的方向不同而已。-
2.3.1>、专栏介绍，我们直接看它的源码：我们发现和Row属性是一致的
Column({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline, List<Widget> children = const <Widget>[], }) -
2.3.2>、专栏演练
class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: <Widget>[ Expanded( flex: 1, child: Container(color: Colors.red, width: 60), ), Container(color: Colors.blue, width: 80, height: 80), Container(color: Colors.green, width: 70, height: 70), Expanded( flex: 1, child: Container(color: Colors.orange, width: 100), ) ], ); } }
-
-
2.4、堆栈组件
在开发中，我们多个组件很有可能需要重叠显示，某些在一张图片上显示文字或一个按钮等。
在Android中可以使用Frame实现，在Web端可以使用绝对定位，在Flutter中我们需要使用布局Stack。-
2.4.1>、堆栈介绍
Stack有一些属性：Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List<Widget> children = const <Widget>[], })- 参数解析：
- 对齐：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子小部件。所谓部分定位，在这里特指没有在某某轴上定位：左，右为横轴，顶部，bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
- textDirection：和Row，Wrap的textDirection功能相同，都用于决定对齐对齐的参考系即：textDirection的变量TextDirection.ltr，则alignment的start代表左，end代表右； textDirection的大小TextDirection.rtl，则alignment的start代表右，end代表左。
- fit：此参数用于决定没有定位的子小部件如何去适应Stack的大小。StackFit.loose表示使用子小部件的大小，StackFit.expand表示扩展伸到Stack的大小。
- 溢出overflow：此属性决定如何显示超过堆栈显示空间的子部件，变化Overflow.clip时，超出部分会被剪裁（隐藏），转化Overflow.visible时则不会。
- 参数解析：
-
2.4.2>、Stack 的 demo
Stack会经常和Positioned一起来使用，Positioned可以决定组件在Stack中的位置，实现实现Web中的绝对定位效果。class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Container( color: Colors.purple, width: 300, height: 300, ), Positioned( left: 20, top: 20, child: Icon(Icons.favorite, size: 50, color: Colors.white) ), Positioned( bottom: 20, right: 20, child: Text("你好啊，李银河", style: TextStyle(fontSize: 20, color: Colors.white)), ) ], ); } }
提示：已定位的组件只能在堆栈中使用 -
网友评论