1# 位置设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zju_ljz--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9设置组件对齐方式、布局方向及显示位置。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## align 16 17align(value: Alignment): T 18 19设置容器元素绘制区域内的子元素的对齐方式，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 31| value | [Alignment](ts-appendix-enums.md#alignment) | 是 | 设置容器元素绘制区域内的子元素的对齐方式。<br/>只在Stack、FolderStack、Shape、Button、Marquee、StepperItem、Text、TextArea、TextInput、[RichEditor](ts-basic-components-richeditor.md)、Hyperlink、SymbolGlyph、ListItem、GridItem、Scroll、FlowItem、ImageAnimator、LoadingProgress、PatternLock、Progress、QRCode、TextClock、TextTimer、MenuItem、Toggle、Checkbox、NodeContainer中生效，其中和文本相关的组件Marquee、Text、TextArea、TextInput、RichEditor、Hyperlink的align结果参考[textAlign](ts-basic-components-text.md#textalign)。<br/>不支持textAlign属性的组件则无法设置水平方向的文字对齐。<br/>默认值：Alignment.Center<br/>**说明：** <br/>该属性不支持镜像能力。<br/>在Stack中该属性与alignContent效果一致，只能设置子组件在容器内的对齐方式。 | 32 33**返回值：** 34 35| 类型 | 说明 | 36| --- | --- | 37| T | 返回当前组件。 | 38 39## align<sup>20+</sup> 40 41align(alignment: Alignment | LocalizedAlignment): T 42 43设置容器元素绘制区域内的子元素的对齐方式，增加支持镜像的能力，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 44 45**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 46 47**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 55| alignment | [Alignment](ts-appendix-enums.md#alignment) \| [LocalizedAlignment](ts-appendix-enums.md#localizedalignment20) | 是 | 设置容器元素绘制区域内的子元素的对齐方式，增加支持镜像的能力。<br/>LocalizedAlignment只在[Shape](ts-drawing-components-shape.md)、[Button](ts-basic-components-button.md)、[GridItem](ts-container-griditem.md)、[FlowItem](ts-container-flowitem.md)、[ImageAnimator](ts-basic-components-imageanimator.md)、[LoadingProgress](ts-basic-components-loadingprogress.md)、[PatternLock](ts-basic-components-patternlock.md)、[Progress](ts-basic-components-progress.md)、[QRCode](ts-basic-components-qrcode.md)、[TextClock](ts-basic-components-textclock.md)、[TextTimer](ts-basic-components-texttimer.md)、[StepperItem](ts-basic-components-stepperitem.md)、[MenuItem](ts-basic-components-menuitem.md)、[Toggle](ts-basic-components-toggle.md)、[Checkbox](ts-basic-components-checkbox.md)、[ListItem](ts-container-listitem.md)中有效果。<br/>其中，除[ListItem](ts-container-listitem.md)与Alignment的效果保持一致以外，其他组件镜像切换均生效；其他设置LocalizedAlignment无效果的组件按其默认效果显示。<br/>默认值：Alignment.Center、LocalizedAlignment.CENTER<br/>**说明：** <br/>Alignment类型不支持镜像能力；LocalizedAlignment类型支持镜像能力，选择LocalizedAlignment中的枚举值，根据direction或系统语言方向的改变实现镜像切换。其中direction的优先级高于系统语言方向，当设置direction且不为auto时，LocalizedAlignment的镜像按照direction进行布局；当设置direction为auto或未设置时，LocalizedAlignment的镜像按照系统语言方向进行布局。<br/>align属性入参为undefined或null时按默认值处理，效果为居中显示。 | 56 57**返回值：** 58 59| 类型 | 说明 | 60| --- | --- | 61| T | 返回当前组件。 | 62 63## direction 64 65direction(value: Direction): T 66 67设置容器元素内主轴方向上的布局，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 68 69**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------ | ------------------------------------------- | ---- | --------------------------------------------------- | 79| value | [Direction](ts-appendix-enums.md#direction) | 是 | 设置容器元素内主轴方向上的布局。<br/>属性配置为auto的时候，按照系统语言方向进行布局。<br/>该属性在Column组件上不生效。<br/>默认值：Direction.Auto <br/>direction取undefined或null时按默认值处理。 | 80 81**返回值：** 82 83| 类型 | 说明 | 84| --- | --- | 85| T | 返回当前组件。 | 86 87## position 88 89position(value: Position | Edges | LocalizedEdges): T 90 91绝对定位，确定子组件相对父组件内容区的位置。父组件内容区的大小为父组件大小减去border、padding、safeAreaPadding提供给子组件可布局的内容区域大小。position对位置的影响作用在组件的尺寸测量完成之后，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 92 93**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 94 95**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 103| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | 是 | 绝对定位，确定子组件相对父组件内容区的位置。当父容器为Row/Column/Flex时，设置position的子组件不占位。<br/>Position类型基于父组件内容区左上角确定位置；Edges类型基于父组件内容区四边确定位置，top/left/right/bottom分别为组件各边距离父组件内容区相应边的边距，通过边距来确定组件相对于父组件内容区的位置；LocalizedEdges类型基于父组件内容区四边确定位置，支持镜像模式。<br/>适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。<br/>不支持在宽高为零的布局容器上设置。<br/>当父容器为[RelativeContainer](ts-container-relativecontainer.md)，且子组件设置了alignRules属性时，子组件的position属性不生效。 | 104 105**返回值：** 106 107| 类型 | 说明 | 108| --- | --- | 109| T | 返回当前组件。 | 110 111## markAnchor 112 113markAnchor(value: Position | LocalizedPosition): T 114 115设置元素在位置定位时的锚点，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 116 117**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 118 119**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123**参数：** 124 125| 参数名 | 类型 | 必填 | 说明 | 126| ------ | -------------------------------- | ---- | ------------------------------------------------------------ | 127| value | [Position](ts-types.md#position) \| [LocalizedPosition<sup>12+</sup>](ts-types.md#localizedposition12) | 是 | 设置元素在位置定位时的锚点，从position或offset的位置上，进一步偏移。<br/>设置.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})，效果等于设置.position({x: value1 - value3, y: value2 - value4})，offset同理。<br/>单独使用markAnchor，设置.markAnchor({x: value1, y: value2})，效果等于设置.offset({x: -value1, y: -value2})。<br/>API version 9及以前，默认值为：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>API version 10：无默认值。 | 128 129**返回值：** 130 131| 类型 | 说明 | 132| --- | --- | 133| T | 返回当前组件。 | 134 135## offset 136 137offset(value: Position | Edges | LocalizedEdges): T 138 139相对偏移，组件相对原本的布局位置进行偏移。和position一起使用时，position生效，offset不生效，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 140 141**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 142 143**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 151| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | 是 | 相对偏移，组件相对原本的布局位置进行偏移。offset属性不影响父容器布局，仅在绘制时调整位置。<br/>Position类型基于组件自身左上角偏移，Edges类型基于组件自身四边偏移。 offset属性设置 {x: x, y: y} 与设置 {left: x, top: y} 以及 {right: -x, bottom: -y} 效果相同, 类型LocalizedEdges支持镜像模式：LTR模式下start 等同于x，RTL模式下等同于-x<br/>API version 9及以前，默认值为：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>默认单位：vp<br/>API version 10：无默认值。 | 152 153**返回值：** 154 155| 类型 | 说明 | 156| --- | --- | 157| T | 返回当前组件。 | 158 159## alignRules<sup>9+</sup> 160 161alignRules(value: AlignRuleOption): T 162 163指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 164 165**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 166 167**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Full 170 171**参数：** 172 173| 参数名 | 类型 | 必填 | 说明 | 174| ------ | ------------------------------------------- | ---- | ------------------------ | 175| value | [AlignRuleOption](#alignruleoption9对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 176 177**返回值：** 178 179| 类型 | 说明 | 180| --- | --- | 181| T | 返回当前组件。 | 182 183## alignRules<sup>12+</sup> 184 185alignRules(alignRule: LocalizedAlignRuleOptions): T 186 187指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。该方法水平方向上以start和end分别替代原方法的left和right，以便在RTL模式下能镜像显示，建议使用该方法指定设置在相对容器中子组件的对齐规则，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 188 189**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 190 191**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| ------ | ------------------------------------------- | ---- | ------------------------ | 199| alignRule | [LocalizedAlignRuleOptions](#localizedalignruleoptions12对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 200 201**返回值：** 202 203| 类型 | 说明 | 204| --- | --- | 205| T | 返回当前组件。 | 206 207## layoutGravity<sup>20+</sup> 208 209layoutGravity(alignment: LocalizedAlignment): T 210 211单独设置Stack容器中子组件的对齐规则，仅当父容器为Stack时生效。与align属性同时使用时，layoutGravity优先级更高，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 212 213**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 214 215**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219**参数：** 220 221| 参数名 | 类型 | 必填 | 说明 | 222| ------ | ------------------------------------------- | ---- | ------------------------ | 223| alignment | [LocalizedAlignment](ts-appendix-enums.md#localizedalignment20) | 是 | 指定设置在Stack容器中子组件的对齐规则。<br/>默认值：LocalizedAlignment.CENTER 。说明：当传入异常值时，按默认值处理。| 224 225**返回值：** 226 227| 类型 | 说明 | 228| -------- | -------- | 229| T | 返回当前组件。 | 230 231## AlignRuleOption<sup>9+</sup>对象说明 232 233**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237| 名称 | 类型 | 只读 | 可选 | 说明 | 238| -------- | -------- | -------- | -------- | -------- | 239| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } |否|是| 设置左对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 240| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } |否|是| 设置右对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 241| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } |否|是| 设置横向居中对齐方式的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 242| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } |否|是| 设置顶部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 243| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } |否|是| 设置底部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 244| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } |否|是| 设置纵向居中对齐方式的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 245| bias<sup>11+</sup> | [Bias](./ts-types.md#bias对象说明) |否|是| 设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 246 247## LocalizedAlignRuleOptions<sup>12+</sup>对象说明 248 249**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253| 名称 | 类型 | 只读 | 可选 | 说明 | 254| -------- | -------- | -------- | -------- | -------- | 255| start | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) |否|是| 设置横向对齐方式的参数，LTR模式时为左对齐，RTL模式时为右对齐。 | 256| end | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) |否|是| 设置横向对齐方式的参数，LTR模式时为右对齐，RTL模式时为左对齐。 | 257| middle | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) |否|是| 设置横向居中对齐方式的参数。| 258| top | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) |否|是| 设置纵向顶部对齐的参数。 | 259| bottom | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) |否|是| 设置纵向底部对齐的参数。 | 260| center | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) |否|是| 设置纵向居中对齐方式的参数。 | 261| bias | [Bias](./ts-types.md#bias对象说明) |否|是| 设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。| 262 263## LocalizedHorizontalAlignParam<sup>12+</sup>对象说明 264 265**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 266 267**系统能力：** SystemCapability.ArkUI.ArkUI.Full 268 269| 名称 | 类型 | 只读 | 可选 | 说明 | 270| -------- | -------- | -------- | -------- | -------- | 271| anchor | string |否|否| 设置作为锚点的组件的id值。 | 272| align | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) |否|否| 设置相对于锚点组件的横向对齐方式。 | 273 274## LocalizedVerticalAlignParam<sup>12+</sup>对象说明 275 276**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280| 名称 | 类型 | 只读 | 可选 | 说明 | 281| -------- | -------- | -------- | -------- | -------- | 282| anchor | string |否|否| 设置作为锚点的组件的id值。 | 283| align | [VerticalAlign](ts-appendix-enums.md#verticalalign) |否|否| 设置相对于锚点组件的纵向对齐方式。 | 284 285## chainMode<sup>12+</sup> 286 287chainMode(direction: Axis, style: ChainStyle): T 288 289指定以该组件为链头所构成的链的参数，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。链头指满足成链规则时链的第一个组件（水平方向从左边起始，镜像语言下从右边起始；竖直方向从上边起始）。 290详细用法请参考[RelativeContainer示例7（设置链）](ts-container-relativecontainer.md#示例7设置链)。 291 292**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 293 294**系统能力：** SystemCapability.ArkUI.ArkUI.Full 295 296**参数：** 297 298| 参数名 | 类型 | 必填 | 说明 | 299| ------ | ------------------------------------------- | ---- | ------------------------ | 300| direction | [Axis](ts-appendix-enums.md#axis) | 是 | 链的方向。 | 301| style | [ChainStyle](#chainstyle12) | 是 | 链的样式。 | 302 303**返回值：** 304 305| 类型 | 说明 | 306| --- | --- | 307| T | 返回当前组件。 | 308 309## ChainStyle<sup>12+</sup> 310 311定义链的风格，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 312 313**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 314 315**系统能力：** SystemCapability.ArkUI.ArkUI.Full 316 317| 名称 | 说明 | 318| ------------- | ------------------------------------------------------------ | 319| SPREAD | 组件在约束锚点间均匀分布。详细用法请参考[RelativeContainer示例7（设置链）](ts-container-relativecontainer.md#示例7设置链)。 | 320| SPREAD_INSIDE | 除首尾2个子组件的其他组件在约束锚点间均匀分布。详细用法请参考[RelativeContainer示例7（设置链）](ts-container-relativecontainer.md#示例7设置链)。 | 321| PACKED | 链内子组件无间隙。详细用法请参考[RelativeContainer示例7（设置链）](ts-container-relativecontainer.md#示例7设置链)。 | 322 323> **说明：** 324> 325> 使用链时，RelativeContainer会为链中的相互依赖的组件定义一个大小计算顺序，大小计算完成后再确定使用ChainStyle的位置。因此使用SPREAD或PACKED风格时，只以链头组件为锚点进行布局的非链组件A和链中其他节点有相同布局优先级，当组件A的id的字典排序靠前时，此时组件A的alignRules先于链的ChainStyle生效。 326 327## chainWeight<sup>14+</sup> 328 329chainWeight(chainWeight: ChainWeightOptions): T 330 331对形成链的组件进行重新布局。仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 332 333**系统能力：** SystemCapability.ArkUI.ArkUI.Full 334 335**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 336 337**参数：** 338 339| 参数名 | 类型 | 必填 | 说明 | 340| ------ | ------------------------------------------- | ---- | ------------------------ | 341| chainWeight | [ChainWeightOptions](ts-types.md#chainweightoptions14对象说明) | 是 | 设置了chainWeight属性的组件与同一条链上的兄弟组件在水平或竖直方向的尺寸会按照设置的权重进行分配，分配时会忽略组件本身尺寸设置，按分配的权重自适应占满剩余空间。 | 342 343**返回值：** 344 345| 类型 | 说明 | 346| --- | --- | 347| T | 返回当前组件。 | 348 349## 示例 350 351### 示例1（对齐方式和主轴方向上的布局） 352 353设置内容在元素内的对齐方式和子元素在父容器主轴方向上的布局。 354 355```ts 356// xxx.ets 357@Entry 358@Component 359struct PositionExample1 { 360 build() { 361 Column() { 362 Column({ space: 10 }) { 363 // 元素内容<元素宽高，设置内容在与元素内的对齐方式 364 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 365 Stack() { 366 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 367 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 368 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 369 .align(Alignment.BottomEnd) 370 Stack() { 371 Text('top start') 372 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 373 .align(Alignment.TopStart) 374 375 // 父容器设置direction为Direction.Ltr，子元素从左到右排列 376 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 377 Row() { 378 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 379 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 380 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 381 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 382 } 383 .width('90%') 384 .direction(Direction.Ltr) 385 // 父容器设置direction为Direction.Rtl，子元素从右到左排列 386 Row() { 387 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 388 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 389 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 390 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 391 } 392 .width('90%') 393 .direction(Direction.Rtl) 394 } 395 } 396 .width('100%').margin({ top: 5 }) 397 } 398} 399``` 400 401 402 403### 示例2（位置偏移） 404 405基于父组件、相对定位、锚点作出位置偏移。 406 407```ts 408// xxx.ets 409@Entry 410@Component 411struct PositionExample2 { 412 build() { 413 Column({ space: 20 }) { 414 // 设置子组件左上角相对于父组件左上角的偏移位置 415 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 416 Row() { 417 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 418 .textAlign(TextAlign.Center) 419 Text('2 position(30, 10)') 420 .size({ width: '60%', height: '30' }) 421 .backgroundColor(0xbbb2cb) 422 .border({ width: 1 }) 423 .fontSize(16) 424 .align(Alignment.Start) 425 .position({ x: 30, y: 10 }) 426 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 427 .textAlign(TextAlign.Center) 428 Text('4 position(50%, 70%)') 429 .size({ width: '50%', height: '50' }) 430 .backgroundColor(0xbbb2cb) 431 .border({ width: 1 }) 432 .fontSize(16) 433 .position({ x: '50%', y: '70%' }) 434 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 435 436 // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 437 // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 438 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 439 Stack({ alignContent: Alignment.TopStart }) { 440 Row() 441 .size({ width: '100', height: '100' }) 442 .backgroundColor(0xdeb887) 443 Text('text') 444 .fontSize('30px') 445 .textAlign(TextAlign.Center) 446 .size({ width: 25, height: 25 }) 447 .backgroundColor(Color.Green) 448 .markAnchor({ x: 25, y: 25 }) 449 Text('text') 450 .fontSize('30px') 451 .textAlign(TextAlign.Center) 452 .size({ width: 25, height: 25 }) 453 .backgroundColor(Color.Green) 454 .markAnchor({ x: -100, y: -25 }) 455 Text('text') 456 .fontSize('30px') 457 .textAlign(TextAlign.Center) 458 .size({ width: 25, height: 25 }) 459 .backgroundColor(Color.Green) 460 .markAnchor({ x: 25, y: -25 }) 461 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 462 463 // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 464 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 465 Row() { 466 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 467 .textAlign(TextAlign.Center) 468 Text('2 offset(15, 30)') 469 .size({ width: 120, height: '50' }) 470 .backgroundColor(0xbbb2cb) 471 .border({ width: 1 }) 472 .fontSize(16) 473 .align(Alignment.Start) 474 .offset({ x: 15, y: 30 }) 475 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 476 .textAlign(TextAlign.Center) 477 Text('4 offset(-5%, 20%)') 478 .size({ width: 100, height: '50' }) 479 .backgroundColor(0xbbb2cb) 480 .border({ width: 1 }) 481 .fontSize(16) 482 .offset({ x: '-5%', y: '20%' }) 483 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 484 } 485 .width('100%').margin({ top: 25 }) 486 } 487} 488``` 489 490 491 492### 示例3（绝对定位和相对偏移） 493 494使用position设置绝对定位，确定子组件相对父组件的位置。使用offset设置相对偏移，组件相对原本的布局位置进行偏移。 495 496```ts 497// xxx.ets 498@Entry 499@Component 500struct Example3 { 501 build() { 502 Column({ space: 20 }){ 503 Text('position use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 504 Row() { 505 Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 506 .textAlign(TextAlign.Center).position({bottom: 0, right: 0}) 507 Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 508 .textAlign(TextAlign.Center).position({top: 0, left: 0}) 509 Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 510 .textAlign(TextAlign.Center).position({ top: '10%', left: '50%' }) 511 Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 512 .textAlign(TextAlign.Center).position({ bottom: 0, left: 30 }) 513 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 514 515 516 Text('offset use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 517 Row() { 518 Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 519 .textAlign(TextAlign.Center) 520 Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 521 .textAlign(TextAlign.Center).offset({top: 30, left: 0}) 522 Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 523 .textAlign(TextAlign.Center) 524 Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12) 525 .textAlign(TextAlign.Center).offset({bottom: 10, right: 30}) 526 }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed }) 527 }.width('100%').margin({ top: 25 }) 528 } 529} 530``` 531 532 533 534### 示例4（镜像效果） 535 536通用布局属性支持镜像能力。从上到下依次通过position，offset，markAnchor实现镜像效果。浅蓝色赋值为原本效果，深蓝色赋值为镜像效果。 537 538```ts 539// xxx.ets 540import { LengthMetrics } from '@kit.ArkUI'; 541@Entry 542@Component 543struct Example4 { 544 private scroller: Scroller = new Scroller() 545 546 build() { 547 Column() { 548 Stack({ alignContent: Alignment.End }) { 549 Scroll(this.scroller) { 550 Flex({ direction: FlexDirection.Column }) { 551 RelativeContainer() { 552 Row() { 553 } 554 .position({ start: LengthMetrics.px(200), top: LengthMetrics.px(100) }) 555 .width("30%") 556 .height("20%") 557 .backgroundColor('rgb(0, 74, 175)') 558 .padding(50) 559 .margin(50) 560 Row() { 561 } 562 .position({ left:'200px', top: '100px' }) 563 .width("30%") 564 .height("20%") 565 .backgroundColor('rgb(39, 135, 217)') 566 .padding(50) 567 .margin(50) 568 Row() { 569 } 570 .offset({ start: LengthMetrics.vp(100), top: LengthMetrics.vp(200) }) 571 .width("30%") 572 .height("20%") 573 .backgroundColor('rgb(0, 74, 175)') 574 .padding(50) 575 .margin(50) 576 Row() { 577 } 578 .offset({ left: 100, top: 200 }) 579 .width("30%") 580 .height("20%") 581 .backgroundColor('rgb(39, 135, 217)') 582 .padding(50) 583 .margin(50) 584 Row() { 585 } 586 .markAnchor({ start: LengthMetrics.fp(100), top: LengthMetrics.fp(-350) }) 587 .width("30%") 588 .height("20%") 589 .backgroundColor('rgb(0, 74, 175)') 590 .padding(50) 591 .margin(50) 592 Row() { 593 } 594 .markAnchor({ x: '100fp', y: '-350fp' }) 595 .width("30%") 596 .height("20%") 597 .backgroundColor('rgb(39, 135, 217)') 598 .padding(50) 599 .margin(50) 600 } 601 .backgroundColor(Color.White) 602 .padding(50) 603 .margin(50) 604 } 605 } 606 .width('100%') 607 .scrollBar(BarState.Off) 608 .scrollable(ScrollDirection.Vertical) 609 610 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) { 611 Text() 612 .width(20) 613 .height(100) 614 .borderRadius(10) 615 .backgroundColor('#C0C0C0') 616 }.width(20).backgroundColor('#ededed') 617 } 618 }.height('90%') 619 } 620} 621``` 622 623镜像前： 624 625 626 627镜像后： 628 629 630 631### 示例5（align属性适配镜像特性） 632 633设置内容在元素内的对齐方式和子元素在父容器主轴方向上的布局。 634 635```ts 636// xxx.ets 637@Entry 638@Component 639struct buttonTestDemo { 640 @State isLocalizedAlignment: LocalizedAlignment[] = 641 [LocalizedAlignment.TOP_START, LocalizedAlignment.TOP, LocalizedAlignment.TOP_END, LocalizedAlignment.START, 642 LocalizedAlignment.CENTER, LocalizedAlignment.END, LocalizedAlignment.BOTTOM_START, LocalizedAlignment.BOTTOM, 643 LocalizedAlignment.BOTTOM_END] 644 @State isLocalizedAlignmentIndex: number = 4 645 @State isDirection: Direction[] = [Direction.Ltr, Direction.Rtl, Direction.Auto] 646 @State isDirectionIndex: number = 0 647 648 build() { 649 Row() { 650 Column() { 651 652 Row({ space: 5 }) { 653 Button('START') 654 .onClick(() => { 655 this.isLocalizedAlignmentIndex = 3 656 }) 657 Button('CENTER') 658 .onClick(() => { 659 this.isLocalizedAlignmentIndex = 4 660 }) 661 Button('END') 662 .onClick(() => { 663 this.isLocalizedAlignmentIndex = 5 664 }) 665 }.margin(20) 666 667 Row({ space: 5 }) { 668 Button('Ltr') 669 .onClick(() => { 670 this.isDirectionIndex = 0 671 }) 672 Button('Rtl') 673 .onClick(() => { 674 this.isDirectionIndex = 1 675 }) 676 Button('Auto') 677 .onClick(() => { 678 this.isDirectionIndex = 2 679 }) 680 }.margin(20) 681 682 Row() { 683 Button('OK', { type: ButtonType.Capsule, stateEffect: true }) 684 .backgroundColor(0x317aff) 685 .width(200) 686 .height(100) 687 .direction(this.isDirection[this.isDirectionIndex]) 688 .align(this.isLocalizedAlignment[this.isLocalizedAlignmentIndex]) 689 }.margin(20) 690 } 691 .width('100%') 692 } 693 .height('100%') 694 } 695} 696``` 697 698 699### 示例6（layoutGravity属性单独设置Stack容器中子组件的对齐规则） 700 701更改Stack中Text的位置。 702 703```ts 704// xxx.ets 705@Entry 706@Component 707struct Index5 { 708 private layoutGravityArr: LocalizedAlignment[] = [ 709 LocalizedAlignment.TOP_START, LocalizedAlignment.TOP, LocalizedAlignment.TOP_END, 710 LocalizedAlignment.START, LocalizedAlignment.CENTER, LocalizedAlignment.END, 711 LocalizedAlignment.BOTTOM_START, LocalizedAlignment.BOTTOM, LocalizedAlignment.BOTTOM_END]; 712 @State layoutGravityIndex: number = 0; 713 private directionArr: Direction[] = [Direction.Ltr, Direction.Rtl, Direction.Auto]; 714 @State directionIndex: number = 0; 715 716 build() { 717 Row() { 718 Column() { 719 Stack({ 720 alignContent: Alignment.TopStart 721 }) { 722 Text('StackChildAlign_TopStart').fontSize(15) 723 Text('Child Text') 724 .width(150) 725 .height(150) 726 .backgroundColor(Color.Yellow) 727 .fontSize(15) 728 .layoutGravity(this.layoutGravityArr[this.layoutGravityIndex]) 729 } 730 .width('100%') 731 .height(400) 732 .backgroundColor(Color.Grey) 733 .margin({ top: 10, bottom: 10 }) 734 .direction(this.directionArr[this.directionIndex]) 735 736 Button("LayoutGravity: " + this.layoutGravityArr[this.layoutGravityIndex]) 737 .width(300) 738 .fontSize(16) 739 .onClick(() => { 740 this.layoutGravityIndex = ++this.layoutGravityIndex % this.layoutGravityArr.length; 741 }) 742 .margin({ bottom: 10 }) 743 744 Button("Direction: " + this.directionArr[this.directionIndex]) 745 .width(150) 746 .fontSize(16) 747 .onClick(() => { 748 this.directionIndex = ++this.directionIndex % this.directionArr.length; 749 }) 750 .margin({ bottom: 10 }) 751 } 752 .width('100%') 753 } 754 .height('100%') 755 } 756} 757``` 758
