美文网首页
对齐与相对定位

对齐与相对定位

作者: 浮名虚誉架构师 | 来源:发表于2020-03-10 13:11 被阅读0次

Align

Align 组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,定义如下:

Align({

  Key key,

  this.alignment = Alignment.center,

  this.widthFactor,

  this.heightFactor,

  Widget child,

})

alignment : 需要一个AlignmentGeometry类型的值,表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类,它有两个常用的子类:Alignment和 FractionalOffset。

widthFactor和heightFactor是用于确定Align 组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是Align 组件的宽高。如果值为null,则组件的宽高将会占用尽可能多的空间。

Align和Stack对比

Align和Stack/Positioned都可以用于指定子元素相对于父元素的偏移,但它们有两个主要区别:

定位参考系统不同;Stack/Positioned定位的的参考系可以是父容器矩形的四个顶点;而Align则需要先通过alignment 参数来确定坐标原点,不同的alignment会对应不同原点,最终的偏移是需要通过alignment的转换公式来计算出。

Stack可以有多个子元素,并且子元素可以堆叠,而Align只能有一个子元素,不存在堆叠。

Center

定义如下:

class Center extends Align {

  const Center({ Key key, double widthFactor, double heightFactor, Widget child })

    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);

}

Center继承自Align,它比Align只少了一个alignment 参数;由于Align的构造函数中alignment 值为Alignment.center,所以Center组件其实是对齐方式确定(Alignment.center)了的Align。

相关文章

  • 对齐与相对定位

    Align Align 组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,定义如下: Alig...

  • ConstraintLayout使用

    相对定位 layout_constraintLeft_toLeftOf view1左边对齐vi...

  • Flutter布局组件<对齐与相对定位Align>

    Flutter入门笔记系列文章部分内容来源于《Flutter 实战》,如有侵权请联系删除! Align Align...

  • 生成如图所示的样式纪录,有关z-index

    主要使用的是伪类元素,思路如下: 父元素为块级元素,且定位为relative,目的是方便伪类元素相对齐定位。 伪类...

  • 【web】绝对定位与相对定位

    【参考博客】:前端女侠-详解CSS的相对定位和绝对定位 在通常情况下,元素的position属性的默认值为:sta...

  • 相对定位与绝对定位演示

    relative与absolute 具体效果为:![ 代码为: div{width:200px;height:2...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • CSS经验

    定位问题 left值是绝对定位元素margin最外围相对于相对定位容器元素border与padding的交界线。 ...

  • 绝对定位、相对定位与固定定位

    绝对定位如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的...

  • css之定位

    定位有三种:相对定位 绝对定位 固定定位 相对定位 认识相对定位相对定位,就是微调元素位置的。让元素相对自己原来的...

网友评论

      本文标题:对齐与相对定位

      本文链接:https://www.haomeiwen.com/subject/yijwdhtx.html