本文主要介绍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);
}

4. 后话

笔者建了一个flutter学习相关的项目,github地址,里面包含了笔者写的关于flutter学习相关的一些文章,会定期更新,也会上传一些学习demo,欢迎大家关注。

5. 参考

  1. Padding class
  2. EdgeInsetsGeometry class
  3. EdgeInsets class
  4. EdgeInsetsDirectional class
  5. RenderPadding class
  6. Align class
  7. Center class

Flutter 布局(二)- Padding、Align、Center详解的更多相关文章

  1. Flutter 布局(一)- Container详解

    本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painti ...

  2. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  3. Flex 布局新旧混合写法详解(兼容微信)

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

  4. Hadoop Mapreduce分区、分组、二次排序过程详解[转]

    原文地址:Hadoop Mapreduce分区.分组.二次排序过程详解[转]作者: 徐海蛟 教学用途 1.MapReduce中数据流动   (1)最简单的过程:  map - reduce   (2) ...

  5. (原创)LAMP搭建之二:apache配置文件详解(中英文对照版)

    LAMP搭建之二:apache配置文件详解(中英文对照版) # This is the main Apache server configuration file. It contains the # ...

  6. Velocity魔法堂系列二:VTL语法详解

    一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...

  7. Python学习二:词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  8. Zookeeper系列二:分布式架构详解、分布式技术详解、分布式事务

    一.分布式架构详解 1.分布式发展历程 1.1 单点集中式 特点:App.DB.FileServer都部署在一台机器上.并且访问请求量较少 1.2  应用服务和数据服务拆分  特点:App.DB.Fi ...

  9. Java8初体验(二)Stream语法详解(转)

    本文转自http://ifeve.com/stream/ Java8初体验(二)Stream语法详解 感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com上篇文章Java8初体验(一 ...

  10. Java8初体验(二)Stream语法详解---符合人的思维模式,数据源--》stream-->干什么事(具体怎么做,就交给Stream)--》聚合

    Function.identity()是什么? // 将Stream转换成容器或Map Stream<String> stream = Stream.of("I", & ...

随机推荐

  1. Api 文档管理系统 RAP2 环境搭建

    Api 文档管理系统 RAP2 环境搭建  发表于 2018-03-27 |  分类于 Api |  评论数: 4|  阅读次数: 4704  本文字数: 4.8k |  阅读时长 ≍ 9 分钟 RA ...

  2. 解决ionic <ion-nav> rootParams获取不到参数

    在使用ion-nav 标签的时候 设置的页面 无法拿到传递的参数 import { Component } from '@angular/core'; import { GettingStartedP ...

  3. PYTHON 中 SQL 带参数

    使用 PYTHON 的字符串填充方式 import mysql.connector sql = 'select \* from school.student where age > {age} ...

  4. python闯关之路(五)前端开发

    一,HTML部分 1,XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元素必 ...

  5. shiro源码篇 - shiro认证与授权,你值得拥有

    前言 开心一刻 我和儿子有个共同的心愿,出国旅游.昨天儿子考试得了全班第一,我跟媳妇合计着带他出国见见世面,吃晚饭的时候,一家人开始了讨论这个.我:“儿子,你的心愿是什么?”,儿子:“吃汉堡包”,我: ...

  6. MyBatis源码解析(三)——Transaction事务模块

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6634151.html 1.回顾 之前介绍了Environment环境类,这其实是一个单例类 ...

  7. go基础系列:数组

    了解Python.Perl.JavaScript的人想必都知道它们的数组是动态的,可以随需求自动增大数组长度.但Go中的数组是固定长度的,数组一经声明,就无法扩大.缩减数组的长度.但Go中也有类似的动 ...

  8. Apollo 10 — adminService 全量发布

    目录 UI 界面 Portal 服务 admin 服务 总结 1. UI 界面 2. Portal 服务 当我们点击上面的发布按钮的时候,调用的当然是 portal 的接口.具体代码如下: /** * ...

  9. IE的浏览器模式、文本模式

    最近在部署网页的时候,发现IE下的布局完成混乱. 在改变IE的文本模式后,显示就正常了. IE的浏览器模式,用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userA ...

  10. Dapper批量更新

    本次示例项目使用Dappe1.50.5和Dapper.Contrib1.50.5 数据库执行的脚本检测工具是SQL Server Prifiler 1.使用Where In 实现批量更新 1.1代码如 ...