1# 位置设置 2 3设置组件的对齐方式、布局方向和显示位置。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## align 10 11align(value: Alignment) 12 13设置容器元素绘制区域内的子元素的对齐方式。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 23| value | [Alignment](ts-appendix-enums.md#alignment) | 是 | 设置容器元素绘制区域内的子元素的对齐方式。<br/>只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效，其中和文本相关的组件Marquee、text、TextArea、TextInput的align结果参考[textAlign](ts-basic-components-text.md#属性)。<br/>不支持textAlign属性的组件则无法设置水平方向的文字对齐。<br/>默认值：Alignment.Center | 24 25## direction 26 27direction(value: Direction) 28 29设置容器元素内主轴方向上的布局。 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| ------ | ------------------------------------------- | ---- | --------------------------------------------------- | 39| value | [Direction](ts-appendix-enums.md#direction) | 是 | 设置容器元素内主轴方向上的布局。<br/>例：Column组件的主轴为纵轴。<br/>默认值：Direction.Auto | 40 41## position 42 43position(value: Position) 44 45绝对定位，设置子元素左上角相对于父容器左上角偏移位置。 46 47**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 55| value | [Position](ts-types.md#position8) | 是 | 绝对定位，设置子元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不参与父容器布局，即不占位，仅在绘制时进行位置调整。<br/>适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。<br/>不支持在宽高为零的布局容器上设置。<br/>当父容器为[RelativeContainer](ts-container-relativecontainer.md)时不生效。 | 56 57## markAnchor 58 59markAnchor(value: Position) 60 61设置子元素在位置定位时的锚点。 62 63**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67**参数：** 68 69| 参数名 | 类型 | 必填 | 说明 | 70| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 71| value | [Position](ts-types.md#position8) | 是 | 设置子元素在位置定位时的锚点，从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：无默认值。 | 72 73## offset 74 75offset(value: Position) 76 77相对定位，设置子元素相对于自身的额外偏移量。 78 79**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 80 81**系统能力：** SystemCapability.ArkUI.ArkUI.Full 82 83**参数：** 84 85| 参数名 | 类型 | 必填 | 说明 | 86| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 87| value | [Position](ts-types.md#position8) | 是 | 相对定位，设置子元素相对于自身的额外偏移量。设置该属性后，子组件正常参与父容器布局，依然会占位，在绘制时基于父容器给予的offset做一次额外的偏移。<br/>API version 9及以前，默认值为：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>API version 10：无默认值。 | 88 89## alignRules<sup>9+</sup> 90 91alignRules(value: AlignRuleOption) 92 93指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 94 95**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ------------------------------------------- | ---- | ------------------------ | 103| value | [AlignRuleOption](#alignruleoption对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 104 105## AlignRuleOption对象说明 106 107从API version 9开始，该接口支持在ArkTS卡片中使用。 108 109| 名称 | 类型 | 描述 | 110| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 111| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置左对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。 | 112| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置右对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。 | 113| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置横向居中对齐方式的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。 | 114| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置顶部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。 | 115| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置底部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。 | 116| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置纵向居中对齐方式的参数。 | 117| bias | [Bias](#bias对象说明) | 设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。| 118 119## Bias对象说明 120| 参数名 | 类型 | 必填 | 说明 | 121| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 122| Bias | { horizontal?: number, vertical?: number } | 否 | 组件在锚点约束下的偏移参数。<br/>- horizontal：水平方向上的bias值。<br/>- vertical：垂直方向上的bias值。<br/>- 当子组件的width可以确定并且有2个水平方向的锚点时生效。<br/>- 当子组件的height可以确定并且有2个垂直方向的锚点时生效。<br/>默认值：{<br/>horizontal: 0.5,<br/>vertical: 0.5<br/>}。 | 123 124## chainMode<sup>11+</sup> 125 126chainMode(direction: Axis, style: ChainStyle) 127 128指定以该组件为链头所构成的链的参数，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| ------ | ------------------------------------------- | ---- | ------------------------ | 136| direction | [Axis](ts-appendix-enums.md#Axis) | 是 | 链的方向。 | 137| style | [ChainStyle](ts-appendix-enums.md#ChainStyle) | 是 | 链的样式。 | 138 139## 示例 140### 示例1 141```ts 142// xxx.ets 143@Entry 144@Component 145struct PositionExample1 { 146 build() { 147 Column() { 148 Column({ space: 10 }) { 149 // 元素内容<元素宽高，设置内容在与元素内的对齐方式 150 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 151 Stack() { 152 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 153 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 154 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 155 .align(Alignment.BottomEnd) 156 Stack() { 157 Text('top start') 158 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 159 .align(Alignment.TopStart) 160 161 // 父容器设置direction为Direction.Ltr，子元素从左到右排列 162 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 163 Row() { 164 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 165 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 166 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 167 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 168 } 169 .width('90%') 170 .direction(Direction.Ltr) 171 // 父容器设置direction为Direction.Rtl，子元素从右到左排列 172 Row() { 173 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 174 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 175 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 176 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 177 } 178 .width('90%') 179 .direction(Direction.Rtl) 180 } 181 } 182 .width('100%').margin({ top: 5 }) 183 } 184} 185``` 186 187 188 189### 示例2 190```ts 191// xxx.ets 192@Entry 193@Component 194struct PositionExample2 { 195 build() { 196 Column({ space: 20 }) { 197 // 设置子组件左上角相对于父组件左上角的偏移位置 198 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 199 Row() { 200 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 201 .textAlign(TextAlign.Center) 202 Text('2 position(30, 10)') 203 .size({ width: '60%', height: '30' }) 204 .backgroundColor(0xbbb2cb) 205 .border({ width: 1 }) 206 .fontSize(16) 207 .align(Alignment.Start) 208 .position({ x: 30, y: 10 }) 209 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 210 .textAlign(TextAlign.Center) 211 Text('4 position(50%, 70%)') 212 .size({ width: '50%', height: '50' }) 213 .backgroundColor(0xbbb2cb) 214 .border({ width: 1 }) 215 .fontSize(16) 216 .position({ x: '50%', y: '70%' }) 217 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 218 219 // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 220 // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 221 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 222 Stack({ alignContent: Alignment.TopStart }) { 223 Row() 224 .size({ width: '100', height: '100' }) 225 .backgroundColor(0xdeb887) 226 Text('text') 227 .fontSize('30px') 228 .textAlign(TextAlign.Center) 229 .size({ width: 25, height: 25 }) 230 .backgroundColor(Color.Green) 231 .markAnchor({ x: 25, y: 25 }) 232 Text('text') 233 .fontSize('30px') 234 .textAlign(TextAlign.Center) 235 .size({ width: 25, height: 25 }) 236 .backgroundColor(Color.Green) 237 .markAnchor({ x: -100, y: -25 }) 238 Text('text') 239 .fontSize('30px') 240 .textAlign(TextAlign.Center) 241 .size({ width: 25, height: 25 }) 242 .backgroundColor(Color.Green) 243 .markAnchor({ x: 25, y: -25 }) 244 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 245 246 // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 247 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 248 Row() { 249 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 250 .textAlign(TextAlign.Center) 251 Text('2 offset(15, 30)') 252 .size({ width: 120, height: '50' }) 253 .backgroundColor(0xbbb2cb) 254 .border({ width: 1 }) 255 .fontSize(16) 256 .align(Alignment.Start) 257 .offset({ x: 15, y: 30 }) 258 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 259 .textAlign(TextAlign.Center) 260 Text('4 offset(-5%, 20%)') 261 .size({ width: 100, height: '50' }) 262 .backgroundColor(0xbbb2cb) 263 .border({ width: 1 }) 264 .fontSize(16) 265 .offset({ x: '-5%', y: '20%' }) 266 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 267 } 268 .width('100%').margin({ top: 25 }) 269 } 270} 271``` 272 273 274
