本系列文章介绍UIElement知识点,欢迎访问😉

本系列文章使用的Unity版本为2019.3.7f1

前言

UIElements使用Yoga布局引擎根据布局和样式属性来定义UI。

默认情况下,所有元素都是布局的一部分,布局具有以下默认行为:

  • 容器垂直分布其子元素
  • 容器矩形的位置包括其子矩形,此行为可能受到其他布局属性的限制。
  • 具有文本的元素在其大小计算中使用文本大小,此行为可能受到其他布局属性的限制。

Layout Engine

Position

UIBuilder中的Position属性示意图

Position分为Relative/Absolute:

  • Relative:相对定位。元素根据布局的正常流程进行定位,然后根据顶部、右侧、底部和左侧的值相对于该位置进行偏移。偏移量不影响任何同级或父元素的位置。
  • Absolute:绝对定位。当元素被绝对定位时,它不参与常规布局流。相反,它是独立于它的兄弟姐妹而设计的。位置是根据顶部、右侧、底部和左侧值确定的。

Left、Top、Right、Bottom这个值是用来使用Absolute或者Relative Layout后对元素位置进行偏移的。

Flex

Flex Direction

Flex方向控制节点的子节点布局的方向。这也被称为主轴。主轴是子元素摆放的方向。横轴:垂直于主轴的轴。
FlexDirection是一个枚举类型,在UnityEngine.UIElements命名空间下。

  • Column:从上到下排列子元素。如果启用了换行,那么下一行将从容器顶部左侧的第一项开始。
  • ColumnReverse:让孩子们从下到上对齐。如果启用了换行,那么下一行将从容器底部左边的第一项开始。
  • Row:让子元素从左到右对齐。如果启用了换行,那么下一行将在容器左边的第一项开始。
  • RowReverse:让孩子们从右向左对齐。如果启用了换行,那么下一行将在容器右侧的第一项下开始。

UIBuilder中的Flex Direction属性示意图

依次是从上到下、从下到上、从左到右、从右到左

Flex Wrap

在容器上设置flex wrap属性,并控制当子元素沿主轴溢出容器的大小时会发生什么。默认情况下,子元素被强制放到一行中(这一行可以收缩元素)。

  • No Wrap:将子元素放在一行
  • Wrap:沿主轴将子元素放在多行,也就是允许换行。
  • Wrap Reverse:允许换行,换行的顺序跟Wrap是相反的。

Align

Align是一个枚举类型,在UnityEngine.UIElements命名空间下。

  • Auto:让Flex属性决定布局
  • FlexStart:将容器的子元素对齐到容器横轴的起点
  • Center:将容器的子元素对齐到容器横轴的中心。
  • FlexEnd:将容器的子元素对齐到容器横轴的末端。
  • Stretch:拉伸容器的子元素以匹配容器的横轴的高度。

Align Items

如何在容器的横轴上对齐子元素

Justify Content

子元素在容器主轴上的对齐方式

  • FlexStart:将容器的子元素对齐到容器主轴的开始位置。
  • Center:将容器的子元素对齐到容器主轴的中心。
  • FlexEnd:将容器的子元素对齐到容器主轴的末端。
  • SpaceBetween:在容器的主轴上均匀地划分孩子的空间,在孩子之间分配剩余的空间。
  • SpaceAround:在容器的主轴线上均匀地分布子元素空间,将剩余的空间分布在子元素周围。与空间相比,使用周围的空间会导致空间被分配到第一个子元素的开始和最后一个子元素的结束。

Size

width和height是设置元素的固定宽高;
maxWidth和maxHeight是设置元素的最大宽高;
minWidth和minHeight是设置元素的最小宽高。

Margin & Padding & Border

Margin(外边距)

影响节点外部的间距。带有margin的节点将从其父节点的界限中偏移自身,但也会偏移任何兄弟节点的位置。如果父节点是自动调整大小的,则节点的边距会影响其父节点的总大小。

Padding(内边距))

如果元素有显式的大小设置,填充将不会添加到元素的总大小中。对于自动调整大小的节点,填充将增加节点的大小,并偏移任何子节点的位置。

Border(边框)

边框也就是元素的四条边,可以设置边框的厚度、颜色、以及四个角的圆角半径。

更多的UIElement知识点文章,还在进行中,如有相关内容需要介绍的,可以在下方留言,抽空更新文章~

以上知识分享,如有错误,欢迎指出,共同学习,共同进步,欢迎留言评论!