学习笔记-Flutter 布局(二)- Padding、Align、Center详解
Flutter 布局(二)- Padding、Align、Center详解
本文主要介绍Flutter布局中的Padding、Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析。
1. Padding
A widget that insets its child by the given padding.
1.1 简介
Padding在Flutter中用的也挺多的,作为一个基础的控件,功能非常单一,给子节点设置padding属性。写过其他端的都了解这个属性,就是设置内边距属性,内边距的空白区域,也是widget的一部分。
Flutter中并没有单独的Margin控件,在Container中有margin属性,看源码关于margin的实现。
if (margin != null)
current = new Padding(padding: margin, child: current);
不难看出,Flutter中淡化了margin以及padding的区别,margin实质上也是由Padding实现的。
1.2 布局行为
Padding的布局分为两种情况:
- 当child为空的时候,会产生一个宽为left+right,高为top+bottom的区域;
- 当child不为空的时候,Padding会将布局约束传递给child,根据设置的padding属性,缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸,在child周围创建空白区域。
1.3 继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Padding
从继承关系可以看出,Padding控件是一个基础控件,不像Container这种组合控件。Container中的margin以及padding属性都是利用Padding控件去实现的。
1.3.1 关于SingleChildRenderObjectWidget
SingleChildRenderObjectWidget是RenderObjectWidgets的一个子类,用于限制只能有一个子节点。它只提供child的存储,而不提供实际的更新逻辑。
1.3.2 关于RenderObjectWidgets
RenderObjectWidgets为RenderObjectElement提供配置,而RenderObjectElement包含着(wrap)RenderObject,RenderObject则是在应用中提供实际的绘制(rendering)的元素。
1.4 示例代码
实例代码直接上官方的例子,非常的简单:
new Padding(
padding: new EdgeInsets.all(8.0),
child: const Card(child: const Text('Hello World!')),
)
例子中对Card设置了一个宽度为8的内边距。
1.5 源码解析
构造函数如下:
const Padding({
Key key,
@required this.padding,
Widget child,
})
包含一个padding属性,相当的简单。
1.5.1 属性解析
padding:padding的类型为EdgeInsetsGeometry,EdgeInsetsGeometry是EdgeInsets以及EdgeInsetsDirectional的基类。在实际使用中不涉及到国际化,例如适配阿拉伯地区等,一般都是使用EdgeInsets。EdgeInsetsDirectional光看命名就知道跟方向相关,因此它的四个边距不限定上下左右,而是根据方向来定的。
1.5.2 源码
@override
RenderPadding createRenderObject(BuildContext context) {
return new RenderPadding(
padding: padding,
textDirection: Directionality.of(context),
);
}
Padding的创建函数,实际上是由RenderPadding来进行的。
关于RenderPadding的实际布局表现,当child为null的时候:
if (child == null) {
size = constraints.constrain(new Size(
_resolvedPadding.left + _resolvedPadding.right,
_resolvedPadding.top + _resolvedPadding.bottom
));
return;
}
返回一个宽为_resolvedPadding.left+_resolvedPadding.right,高为_resolvedPadding.top+_resolvedPadding.bottom的区域。
当child不为null的时候,经历了三个过程,即调整child尺寸、调整child位置以及调整Padding尺寸,最终达到实际的布局效果。
// 调整child尺寸
final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding);
child.layout(innerConstraints, parentUsesSize: true);
// 调整child位置
final BoxParentData childParentData = child.parentData;
childParentData.offset = new Offset(_resolvedPadding.left, _resolvedPadding.top);
// 调整Padding尺寸
size = constraints.constrain(new Size(
_resolvedPadding.left + child.size.width + _resolvedPadding.right,
_resolvedPadding.top + child.size.height + _resolvedPadding.bottom
));
到此处,上面介绍的padding布局行为就解释的通了。
1.6 使用场景
Padding本身还是挺简单的,基本上需要间距的地方,它都能够使用。如果在单一的间距场景,使用Padding比Container的成本要小一些,毕竟Container里面包含了多个widget。Padding能够实现的,Container都能够实现,只不过,Container更加的复杂。
2. Align
A widget that aligns its child within itself and optionally sizes itself based on the child’s size.
2.1 简介
在其他端的开发,Align一般都是当做一个控件的属性,并没有拿出来当做一个单独的控件。Align本身实现的功能并不复杂,设置child的对齐方式,例如居中、居左居右等,并根据child尺寸调节自身尺寸。
2.2 布局行为
Align的布局行为分为两种情况:
- 当widthFactor和heightFactor为null的时候,当其有限制条件的时候,Align会根据限制条件尽量的扩展自己的尺寸,当没有限制条件的时候,会调整到child的尺寸;
- 当widthFactor或者heightFactor不为null的时候,Aligin会根据factor属性,扩展自己的尺寸,例如设置widthFactor为2.0的时候,那么,Align的宽度将会是child的两倍。
Align为什么会有这样的布局行为呢?原因很简单,设置对齐方式的话,如果外层元素尺寸不确定的话,内部的对齐就无法确定。因此,会有宽高因子、根据外层限制扩大到最大尺寸、外层不确定时调整到child尺寸这些行为。
2.3 继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Align
可以看出,Align跟Padding一样,也是一个非常基础的组件,Container中的align属性,也是使用Align去实现的。
2.4 示例代码
new Align(
alignment: Alignment.center,
widthFactor: 2.0,
heightFactor: 2.0,
child: new Text("Align"),
)
例子依旧很简单,设置一个宽高为child两倍区域的Align,其child处在正中间。
2.5 源码解析
const Align({
Key key,
this.alignment: Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child
})
Align的构造函数基本上就是宽高因子、对齐方式属性。日常使用中,宽高因子属性基本上用的不多。如果是复杂的布局,Container内部的align属性也可以实现相同的效果。
2.5.1 属性解析
alignment:对齐方式,一般会使用系统默认提供的9种方式,但是并不是说只有这9种,例如如下的定义。系统提供的9种方式只是预先定义好的。
/// The top left corner.
static const Alignment topLeft = const Alignment(-1.0, -1.0);
Alignment实际上是包含了两个属性的,其中第一个参数,-1.0是左边对齐,1.0是右边对齐,第二个参数,-1.0是顶部对齐,1.0是底部对齐。根据这个规则,我们也可以自定义我们需要的对齐方式,例如
/// 居右高于底部1/4处.
static const Alignment rightHalfBottom = alignment: const Alignment(1.0, 0.5),
widthFactor:宽度因子,如果设置的话,Align的宽度就是child的宽度乘以这个值,不能为负数。
heightFactor:高度因子,如果设置的话,Align的高度就是child的高度乘以这个值,不能为负数。
2.5.2 源码
@override
RenderPositionedBox createRenderObject(BuildContext context) {
return new RenderPositionedBox(
alignment: alignment,
widthFactor: widthFactor,
heightFactor: heightFactor,
textDirection: Directionality.of(context),
);
}
Align的实际构造调用的是RenderPositionedBox。
RenderPositionedBox的布局表现如下:
// 根据_widthFactor、_heightFactor以及限制因素来确定宽高
final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;
if (child != null) {
// 如果child不为null,则根据规则设置Align的宽高,如果需要缩放,则根据_widthFactor是否为null来进行缩放,如果不需要,则尽量扩展。
child.layout(constraints.loosen(), parentUsesSize: true);
size = constraints.constrain(new Size(shrinkWrapWidth ? child.size.width * (_widthFactor ?? 1.0) : double.infinity,
shrinkWrapHeight ? child.size.height * (_heightFactor ?? 1.0) : double.infinity));
alignChild();
} else {
// 如果child为null,如果需要缩放,则变为0,否则就尽量扩展
size = constraints.constrain(new Size(shrinkWrapWidth ? 0.0 : double.infinity,
shrinkWrapHeight ? 0.0 : double.infinity));
}
2.6 使用场景
一般在对齐场景下使用,例如需要右对齐或者底部对齐之类的。它能够实现的功能,Container都能实现。
3. Center
Center继承自Align,只不过是将alignment设置为Alignment.center,其他属性例如widthFactor、heightFactor,布局行为,都与Align完全一样,在这里就不再单独做介绍了。Center源码如下,没有设置alignment属性,是因为Align默认的对齐方式就是居中。
class Center extends Align {
/// Creates a widget that centers its child.
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
点击关注,共同学习!
[安全狗的自我修养](https://mp.weixin.qq.com/s/E6Kp0fd7_I3VY5dOGtlD4w)
[github haidragon](https://github.com/haidragon)
https://github.com/haidragon
5. 参考
- Padding class
- EdgeInsetsGeometry class
- EdgeInsets class
- EdgeInsetsDirectional class
- RenderPadding class
- Align class
- Center class
学习笔记-Flutter 布局(二)- Padding、Align、Center详解相关推荐
- Android 学习笔记 Contacts (二)Contacts 联系人详解
1.获取联系人详细信息 在(一)中我们只是获取了联系人的ID和NAME,但是这是远远不够的,怎么样获取其他的值呢? public void fetchContactInformation() { St ...
- Ext.Net学习笔记22:Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"><Root> ...
- python列表和元组的应用_python学习笔记之列表(list)与元组(tuple)详解
前言 最近重新再看python的基础知识,感觉自己还是对于这些知识很陌生,需要用的时候还是需要翻书查阅,还是先注重基础吧--我要重新把python的教程阅读一遍,把以前自己忽略的部分学习,加强练习和记 ...
- 【Azure 架构师学习笔记】-Azure Data Factory (4)-触发器详解-事件触发器
本文属于[Azure 架构师学习笔记]系列. 本文属于[Azure Data Factory]系列. 接上文[Azure 架构师学习笔记]-Azure Data Factory (3)-触发器详解-翻 ...
- 【matcovnet学习笔记】objective,top1error,top5error详解
[matcovnet学习笔记]objective,top1error,top5error详解 排名前1和前5的错误率是衡量某些解决方案成功与否的重要单位 ,要理解这三个概念,关键是要看懂下面这个多类误 ...
- 学习笔记-Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解...
Flutter 布局(四)- Baseline.FractionallySizedBox.IntrinsicHeight.IntrinsicWidth详解 本文主要介绍Flutter布局中的Basel ...
- Flutter学习笔记08-Padding Row Column Flex Expanded组件详解
学习视频地址:https://www.bilibili.com/video/BV1S4411E7LY?p=27&spm_id_from=pageDriver&vd_source=cee ...
- 【C++】【学习笔记】【递归与回溯问题详解与例题】排列问题;组合问题;二维平面回溯;flood fill问题;搜索问题(八皇后);
目录 七.递归和回溯 1.回溯 2.回溯应用 - 排列问题 2.回溯应用 - 组合问题 3.回溯应用 - 二维平面 4.回溯应用 - floodfill算法 问题 4.回溯应用 - 搜索问题 - 八皇 ...
- Apollo星火计划学习笔记第六讲——Apollo感知模块详解实践2感知基础
Apollo学习笔记 零.目录 一.Apollo感知框架介绍 1.1 检测和分类 1.2 跟踪 1.3 感知模块代码结构 1.3.1 感知模块入口 二.Lidar障碍物检测.红绿灯识别 2.1 Lid ...
最新文章
- Java练习:用IF()进行数字排序
- 创建集成含有SQL Server 2008 RTM + Service Pack 1 的安装 (翻译)
- linux怎么用两个进程传值,关于linux:将变量脚本参数传递给另一个脚本,然后将qsub传递给程序...
- 会话跟踪技术之HttpSession
- c语言超市账务管理源代码,C语言 超市管理系统源程序.doc
- 步步惊芯 软核处理器的内部设计分析 pdf_【深度分析】互联网巨头造“芯”现状...
- Zephry Uart Device详解
- 抢购软件使用方法(如何开发抢购软件)
- Win10更新失败的解决办法
- 常见ABO血型遗传规律表
- 一年半,从编程都不懂的小白到成功入职!
- LL(1)语法分析实验报告
- android绘制半圆弧线_android实现简单圆弧效果
- shell脚本编程之awk入门
- 用windows 画图 裁剪照片
- 关于库位“参与MRP运算”与“不参与运算”相互变动的注意事项
- java爬虫 403_使用java爬虫获取网络资源403错误解决
- 【51单片机多机通信】主机控制从机1步进电机、从机2超声波测距(主机可集中显示步进电机的转速、转向、启停状态以及超声波测距结果)
- 深入理解JVM之垃圾回收算法
- System 命名空间