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