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