1# 位置设置 2 3设置组件的对齐方式、布局方向和显示位置。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 描述 | 14| -------- | -------- | -------- | 15| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容在元素绘制区域内的对齐方式。<br/>默认值：Alignment.Center<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值：Direction.Auto<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17| position | [Position](ts-types.md#position8) | 绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。<br/>适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 18| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 19| offset | [Position](ts-types.md#position8) | 相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 20| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>- left：设置左对齐参数。<br/>- right：设置右对齐参数。<br/>- middle：设置中间对齐的参数。<br/>- top：设置顶部对齐的参数。<br/>- bottom：设置底部对齐的参数。<br/>- center：设置中心对齐的参数。<br/>该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>- anchor：设置作为锚点的组件的id值。<br>- align：设置相对于锚点组件的对齐方式。 | 21 22 23## 示例 24### 示例1 25```ts 26// xxx.ets 27@Entry 28@Component 29struct PositionExample1 { 30 build() { 31 Column() { 32 Column({ space: 10 }) { 33 // 元素内容<元素宽高，设置内容在与元素内的对齐方式 34 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 35 Stack() { 36 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 37 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 38 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 39 .align(Alignment.BottomEnd) 40 Stack() { 41 Text('top start') 42 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 43 .align(Alignment.TopStart) 44 45 // 父容器设置direction为Direction.Ltr，子元素从左到右排列 46 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 47 Row() { 48 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 49 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 50 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 51 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 52 } 53 .width('90%') 54 .direction(Direction.Ltr) 55 // 父容器设置direction为Direction.Rtl，子元素从右到左排列 56 Row() { 57 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 58 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 59 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 60 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 61 } 62 .width('90%') 63 .direction(Direction.Rtl) 64 } 65 } 66 .width('100%').margin({ top: 5 }) 67 } 68} 69``` 70 71 72 73### 示例2 74```ts 75// xxx.ets 76@Entry 77@Component 78struct PositionExample2 { 79 build() { 80 Column({ space: 20 }) { 81 // 设置子组件左上角相对于父组件左上角的偏移位置 82 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 83 Row() { 84 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 85 .textAlign(TextAlign.Center) 86 Text('2 position(30, 10)') 87 .size({ width: '60%', height: '30' }) 88 .backgroundColor(0xbbb2cb) 89 .border({ width: 1 }) 90 .fontSize(16) 91 .align(Alignment.Start) 92 .position({ x: 30, y: 10 }) 93 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 94 .textAlign(TextAlign.Center) 95 Text('4 position(50%, 70%)') 96 .size({ width: '50%', height: '50' }) 97 .backgroundColor(0xbbb2cb) 98 .border({ width: 1 }) 99 .fontSize(16) 100 .position({ x: '50%', y: '70%' }) 101 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 102 103 // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 104 // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 105 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 106 Stack({ alignContent: Alignment.TopStart }) { 107 Row() 108 .size({ width: '100', height: '100' }) 109 .backgroundColor(0xdeb887) 110 Text('text') 111 .fontSize('30px') 112 .textAlign(TextAlign.Center) 113 .size({ width: 25, height: 25 }) 114 .backgroundColor(Color.Green) 115 .markAnchor({ x: 25, y: 25 }) 116 Text('text') 117 .fontSize('30px') 118 .textAlign(TextAlign.Center) 119 .size({ width: 25, height: 25 }) 120 .backgroundColor(Color.Green) 121 .markAnchor({ x: -100, y: -25 }) 122 Text('text') 123 .fontSize('30px') 124 .textAlign(TextAlign.Center) 125 .size({ width: 25, height: 25 }) 126 .backgroundColor(Color.Green) 127 .markAnchor({ x: 25, y: -25 }) 128 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 129 130 // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 131 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 132 Row() { 133 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 134 .textAlign(TextAlign.Center) 135 Text('2 offset(15, 30)') 136 .size({ width: 120, height: '50' }) 137 .backgroundColor(0xbbb2cb) 138 .border({ width: 1 }) 139 .fontSize(16) 140 .align(Alignment.Start) 141 .offset({ x: 15, y: 30 }) 142 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 143 .textAlign(TextAlign.Center) 144 Text('4 offset(-10%, 20%)') 145 .size({ width: 100, height: '50' }) 146 .backgroundColor(0xbbb2cb) 147 .border({ width: 1 }) 148 .fontSize(16) 149 .offset({ x: '-5%', y: '20%' }) 150 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 151 } 152 .width('100%').margin({ top: 25 }) 153 } 154} 155``` 156 157 158
