相對布局(RelativeContainer)
- 相對布局可以讓子元素指定兄弟元素或父容器作為錨點,基于錨點做位置布局
- 必須為RelativeContainer及其子元素設置ID,用于指定錨點信息。未設置ID的子元素不會顯示
- RelativeContainer ID為“__container__”,其余子元素的ID通過id屬性設置。
- 子元素通過?
alignRules
?指定相對布局規則 - 開發前請熟悉鴻蒙開發指導文檔:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點擊或者復制轉到。
錨點的對齊位置示意圖
一個示例
typescript
復制代碼
@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row().width(100).height(100).backgroundColor('#FF3333').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top }, //以父容器為錨點,豎直方向頂頭對齊middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器為錨點,水平方向居中對齊}).id('row1') //設置錨點為row1Row() {Image($r('app.media.icon'))}.height(100).width(100).alignRules({top: { anchor: 'row1', align: VerticalAlign.Bottom }, //以row1組件為錨點,豎直方向低端對齊left: { anchor: 'row1', align: HorizontalAlign.Start } //以row1組件為錨點,水平方向開頭對齊}).id('row2') //設置錨點為row2Row().width(100).height(100).backgroundColor('#FFCC00').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top }}).id('row3') //設置錨點為row3Row().width(100).height(100).backgroundColor('#FF9966').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top },left: { anchor: 'row2', align: HorizontalAlign.End },}).id('row4') //設置錨點為row4Row().width(100).height(100).backgroundColor('#FF66FF').alignRules({top: { anchor: 'row2', align: VerticalAlign.Bottom },middle: { anchor: 'row2', align: HorizontalAlign.Center }}).id('row5') //設置錨點為row5}.width(300).height(300).border({ width: 2, color: '#6699FF' })}.height('100%').margin({ left: 30 })}
}
鴻蒙語言有TS、ArkTS等語法,那么除了這些基礎知識之外,其核心技術點有那些呢?下面就用一張整理出的鴻蒙學習路線圖表示:
從上面的OpenHarmony技術梳理來看,鴻蒙的學習內容也是很多的。現在全網的鴻蒙學習文檔也是非常的少,下面推薦一些:完整內容可在頭像頁保存,或這qr23.cn/AKFP8k甲助力
內容包含:《鴻蒙NEXT星河版開發學習文檔》
- ArkTS
- 聲明式ArkUI
- 多媒體
- 通信問題
- 系統移植
- 系統裁剪
- FW層的原理
- 各種開發調試工具
- 智能設備開發
- 分布式開發等等。
這些就是對往后開發者的分享,希望大家多多點贊關注喔!