組件布局中相對定位的分類和使用（Position、MarkAnchor、Offset）
場景說明
OpenHarmony為開發(fā)者提供了豐富的組件布局能力，當(dāng)開發(fā)者在布局時希望組件的位置不采用固定的對齊方式，就可以使用相對布局對組件進(jìn)行精確定位。其中position、markAnchor、offset三種方式可以實現(xiàn)相對定位，開發(fā)者容易混淆，本文將結(jié)合圖文和具體示例，為大家講解三者的用法和區(qū)別。
position
使用語法：
組件.position({x,y})開發(fā)者可以通過position屬性來固定組件的位置。以父組件的左上角為坐標(biāo)原點，添加了position屬性的子組件左上角固定在參數(shù)x、y指定的坐標(biāo)點。x，y均延坐標(biāo)箭頭方向遞增。
參考坐標(biāo)圖如下（以x>0，y>0為例）：
示例
本例在一個Row組件中添加一個Text子組件，如果希望Text組件相對于Row組件左上角向右下方偏移到（30,20）的位置，使用position實現(xiàn)的代碼如下：
Row() {
Text('.postion({x:30,y:20})')
......
.position({ x: 30, y: 20 })
}
......示例圖如下：
markAnchor
使用語法：
組件.markAnchor({x,y})開發(fā)者也可以通過markAnchor屬性對組件進(jìn)行相對定位。markAnchor屬性通常和position屬性一起使用，也可以單獨使用。
- 當(dāng)單獨使用markAnchor屬性時，markAnchor的坐標(biāo)系會隨父組件中子組件對齊方式的變化而變化，當(dāng)子組件為頂部對齊時，坐標(biāo)系原點為父組件的左上角；當(dāng)子組件居中對齊時，坐標(biāo)系原點為父組件高度2/3處的頂點；當(dāng)子組件底部對齊時，坐標(biāo)系原點為父組件高度1/3處的頂點。
添加了markAnchor屬性的組件的左上角固定在參數(shù)x、y指定的坐標(biāo)點，與position屬性不同的是，x軸和y軸的遞增方向相反。
以父組件中子組件頂部對齊為例，參考坐標(biāo)圖如下（以x>0，y>0為例）：
示例
本例在一個Column組件中添加一個Text子組件，由于Column組件默認(rèn)子組件頂部對齊，所以坐標(biāo)原點為Column組件的左上角。如果希望Text組件相對于Column組件左上角向左上方偏移到（25,25）的位置，使用markAnchor實現(xiàn)的代碼如下：
Column() {
Text('.markAnchor({x:25,y:25})')
......
.markAnchor({ x: 25, y: 25 })
}
......示例圖如下：
組件布局中相對定位的分類和使用（position、markAnchor、offset）-開源基礎(chǔ)軟件社區(qū)
- 當(dāng)跟position屬性一起使用時，此時會先以父組件的左上角為原點移動到position參數(shù)x，y指定的坐標(biāo)點，然后以position中x，y的值為坐標(biāo)原點，再將組件按照markAnchor中x，y的值進(jìn)行移動。這里就體現(xiàn)出錨點的概念，position的位置即為錨點。
說明：
由于position的坐標(biāo)系不受父組件中子組件的對齊方式影響，所以當(dāng)和position屬性一起使用時，markAnchor的坐標(biāo)系也不受父組件中子組件的對齊方式影響。
- 其坐標(biāo)圖如下（以x>0，y>0為例）：
示例
本例在一個Stack組件中添加一個Text子組件，同時給Text組件添加position屬性和markAnchor屬性。Text組件會先采用position的坐標(biāo)系，以Stack組件左上角為原點，移動到（50,50）的位置，再以（50,50）為坐標(biāo)原點，采用markAnchor的坐標(biāo)系移動到（25,25）的位置，代碼如下：
Stack({ alignContent: Alignment.TopStart }) {
Text('.markAnchor({x:25,y:25}) .position({x:50,y:50})')
......
.markAnchor({ x: 25, y: 25 })
.position({x:50,y:50})
}
......示例圖如下：
offset
使用語法：
組件.offset({x,y})開發(fā)者可以通過offset屬性設(shè)置組件相對于前一個組件的偏移量。添加了offset屬性的組件以前一個組件的右上角為坐標(biāo)原點進(jìn)行偏移，其左上角偏移到（x，y）坐標(biāo)點。x，y均延坐標(biāo)箭頭方向遞增。
參考坐標(biāo)圖如下（以x>0，y>0為例）：
組件布局中相對定位的分類和使用（position、markAnchor、offset）-開源基礎(chǔ)軟件社區(qū)
示例
本例在一個Row組件中添加A、B兩個Text子組件，如果希望B相對于A的左上角偏移到（30,0）的位置，使用offset實現(xiàn)的代碼如下：
Row() {
Text('A')
......
Text('B.offset({x:30, y:0})')
.offset({ x: 30, y: 0 })
......
}.width('90%').height(50)
......示例圖如下：
組件布局中相對定位的分類和使用（position、markAnchor、offset）-開源基礎(chǔ)軟件社區(qū)
