1# 组件布局中相对定位的分类和使用
2
3## 场景说明
4
5OpenHarmony为开发者提供了丰富的组件布局能力，当开发者在布局时希望组件的位置不采用固定的对齐方式，就可以使用相对布局对组件进行精确定位。其中position、markAnchor、offset三种方式可以实现相对定位，开发者容易混淆，本文将结合图文和具体示例，为大家讲解三者的用法和区别。
6
7## position
8
9**使用语法：**
10```js
11组件.position({x,y})
12```
13
14开发者可以通过position属性来固定组件的位置。以父组件的左上角为坐标原点，添加了position属性的子组件左上角固定在参数x、y指定的坐标点。x，y均延坐标箭头方向递增。
15
16参考坐标图如下（以x>0，y>0为例）：
17
18![position](figures/position.png)
19
20**示例：**
21
22本例在一个Row组件中添加一个Text子组件，如果希望Text组件相对于Row组件左上角向右下方偏移到（30,20）的位置，使用position实现的代码如下：
23```js
24Row() {
25  Text('.postion({x:30,y:20})')
26    ......
27    .position({ x: 30, y: 20 })
28}
29......
30```
31示例图如下：
32
33![position-sample](figures/position-sample.PNG)
34
35## markAnchor
36
37**使用语法：**
38```js
39组件.markAnchor({x,y})
40```
41
42开发者也可以通过markAnchor属性对组件进行相对定位。markAnchor属性通常和position属性一起使用，也可以单独使用。
43
44- 当单独使用markAnchor属性时，markAnchor的坐标系会随父组件中子组件对齐方式的变化而变化，当子组件为顶部对齐时，坐标系原点为父组件的左上角；当子组件居中对齐时，坐标系原点为父组件高度2/3处的顶点；当子组件底部对齐时，坐标系原点为父组件高度1/3处的顶点。
45  添加了markAnchor属性的组件的左上角固定在参数x、y指定的坐标点，与position属性不同的是，x轴和y轴的递增方向相反。
46
47  以父组件中子组件顶部对齐为例，参考坐标图如下（以x>0，y>0为例）：
48
49    ![markAnchor](figures/markAnchor.png)
50
51  **示例:**
52
53  本例在一个Column组件中添加一个Text子组件，由于Column组件默认子组件顶部对齐，所以坐标原点为Column组件的左上角。如果希望Text组件相对于Column组件左上角向左上方偏移到（25,25）的位置，使用markAnchor实现的代码如下：
54
55    ```js
56    Column() {
57      Text('.markAnchor({x:25,y:25})')
58        ......
59        .markAnchor({ x: 25, y: 25 })
60    }
61    ......
62    ```
63  示例图如下：
64
65    ![markAnchor-sample](figures/markAnchor-sample.PNG)
66
67- 当跟position属性一起使用时，此时会先以父组件的左上角为原点移动到position参数x，y指定的坐标点，然后以position中x，y的值为坐标原点，再将组件按照markAnchor中x，y的值进行移动。这里就体现出锚点的概念，position的位置即为锚点。
68    > ![icon-note.gif](../device-dev/public_sys-resources/icon-note.gif) **说明：**
69    > 由于position的坐标系不受父组件中子组件的对齐方式影响，所以当和position属性一起使用时，markAnchor的坐标系也不受父组件中子组件的对齐方式影响。
70
71    其坐标图如下（以x>0，y>0为例）：
72
73    ![markAnchor-with-position](figures/markAnchor-with-position.png)
74
75    **示例:**
76
77    本例在一个Stack组件中添加一个Text子组件，同时给Text组件添加position属性和markAnchor属性。Text组件会先采用position的坐标系，以Stack组件左上角为原点，移动到（50,50）的位置，再以（50,50）为坐标原点，采用markAnchor的坐标系移动到（25,25）的位置，代码如下：
78    ```js
79    Stack({ alignContent: Alignment.TopStart }) {
80      Text('.markAnchor({x:25,y:25}) .position({x:50,y:50})')
81        ......
82        .markAnchor({ x: 25, y: 25 })
83        .position({x:50,y:50})
84    }
85    ......
86    ```
87    示例图如下：
88
89    ![markAnchor-with-position-sample](figures/markAnchor-with-position-sample.PNG)
90
91## offset
92
93**使用语法：**
94```js
95组件.offset({x,y})
96```
97
98开发者可以通过offset属性设置组件相对于前一个组件的偏移量。添加了offset属性的组件以前一个组件的右上角为坐标原点进行偏移，其左上角偏移到（x，y）坐标点。x，y均延坐标箭头方向递增。
99
100参考坐标图如下（以x>0，y>0为例）：
101
102![offset](figures/offset.png)
103
104**示例：**
105
106本例在一个Row组件中添加A、B两个Text子组件，如果希望B相对于A的左上角偏移到（30,0）的位置，使用offset实现的代码如下：
107```js
108Row() {
109  Text('A')
110    ......
111  Text('B.offset({x:30, y:0})')
112    .offset({ x: 30, y: 0 })
113    ......
114}.width('90%').height(50)
115......
116```
117
118示例图如下：
119
120![offset-sample](figures/offset-sample.PNG)
121
122## 参考
123- [position/markAnchor/offset属性使用指导](../application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md)