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);
}

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

原文地址：https://www.cnblogs.com/holy-loki/p/9735045.html

时间： 2024-10-08 08:16:11

Flutter 布局（二）- Padding、Align、Center详解的相关文章

Flutter 布局（一）- Container详解

本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painting, positioning, and sizing widgets. Container在Flutter中太常见了.官方给出的简介,是一个结合了绘制(painting).定位(positioning)以及尺寸(sizing)widget的widget. 可以得出几个信息,它是一个组合的widge

Android转载二：工程目录详解

REF:http://blog.csdn.net/dianfusoft/article/details/7422540       可以看出这个工程由src,gen,Android2.3.3 jar包,assets,bin,res,AndroidManifest.xml,proguard.cfg,project.properties这几个文件(夹)组成,具体作用如下所示: 下面分层次详解几个重要的文件(夹) ● src文件夹 展开这个文件夹如下所示 可以看出,这个文件夹主要用来存放源文件 ●ge

Java8初体验（二）Stream语法详解

原文链接:http://ifeve.com/stream/ 1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel aggregate operations. 我们来解读一下上面的那句话: Stream是元素的集合,这点让Stream看起来用些类似Iterator: 可以支持顺序和并行的对原Stream进行汇聚的操作: 大家可以把Stream当成一个高级版本的

Velocity魔法堂系列二：VTL语法详解

一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不同的平台上,如.Net的NVelocity和js的Velocity.js,虽然各平台在使用和实现上略有差别,但大部分语法和引擎核心的实现是一致的,因此学习成本降低不少哦. 最好的学习资源——官网:http://velocity.apache.org/ 本系列打算采用如下结构对Velocity进行较为

如何生成二维码过程详解

如何生成二维码过程详解 1 下载zxing2.1 2 本代码配置环境:eclipse.java1.6.windows8.zxing2.1 3 解压后将文件夹里面core/src下面的com文件夹导入到eclipse工程(工程可以自己建,如QrCode)中,图示如下: 注意:在源码中需要修改其编码配置为UTF-8,否则后面解码后面的文件中中文会乱码,修改图示如下: 4 TestEnDeCode.java源代码 1 package test; 2 import java.awt.image.Buff

【转】Java8初体验（二）Stream语法详解

原文链接 http://ifeve.com/stream/ Java8初体验(二)Stream语法详解 感谢同事[天锦]的投稿.投稿请联系 [email protected]上篇文章Java8初体验(一)lambda表达式语法比较详细的介绍了lambda表达式的方方面面,细心的读者会发现那篇文章的例子中有很多Stream的例子.这些Stream的例子可能让你产生疑惑,本文将会详细讲解Stream的使用方法(不会涉及Stream的原理,因为这个系列的文章还是一个快速学习如何使用的). 1. Str

Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件 |-- layouts // 布局目录,用于组织应用的布局组件,不可更改. |-- middleware // 用于存放中间件 |-- pages // 用于存放

Hibernate（二）之Hibernate-api详解

一.Hibernate体系结构 二.Hibernate-api详解 2.1.Configuration配置对象 Configuration是用来加载配置文件的 我们Hibernate中主要有两个配置文件,第一个是核心的配置文件,第二个是映射文件. 2.2.SessionFactory工厂 SessionFactory 相当于java web连接池,用于管理所有session 获得方式:config.buildSessionFactory(); sessionFactory hibernate缓存

二：Tomcat原理详解大全

[目录]本文主要讲解Tomcat启动和部署webapp时的原理和过程,以及其使用的配置文件的详解.主要有三大部分: 第一部分.Tomcat的简介和启动过程 第二部分.Tomcat部署webapp 第三部分.Tomcat处理一个http请求的过程 [简介] Tomcat依赖<CATALINA_HOME>/conf/server.xml这个配置文件启动server(一个Tomcat实例,核心就是启动容器Catalina). Tomcat部署Webapp时,依赖context.xml和web.xml