鴻蒙ArkUI開發:常用布局【相對布局】

相對布局(RelativeContainer)

  1. 相對布局可以讓子元素指定兄弟元素或父容器作為錨點,基于錨點做位置布局
  2. 必須為RelativeContainer及其子元素設置ID,用于指定錨點信息。未設置ID的子元素不會顯示
  3. RelativeContainer ID為“__container__”,其余子元素的ID通過id屬性設置。
  4. 子元素通過?alignRules?指定相對布局規則
  5. 開發前請熟悉鴻蒙開發指導文檔:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點擊或者復制轉到。

錨點的對齊位置示意圖

image.png

一個示例

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 })}
}
 

搜狗高速瀏覽器截圖20240326151450.png

image.png

鴻蒙語言有TS、ArkTS等語法,那么除了這些基礎知識之外,其核心技術點有那些呢?下面就用一張整理出的鴻蒙學習路線圖表示:

從上面的OpenHarmony技術梳理來看,鴻蒙的學習內容也是很多的。現在全網的鴻蒙學習文檔也是非常的少,下面推薦一些:完整內容可在頭像頁保存,或這qr23.cn/AKFP8k甲助力

內容包含:《鴻蒙NEXT星河版開發學習文檔》

  • ArkTS
  • 聲明式ArkUI
  • 多媒體
  • 通信問題
  • 系統移植
  • 系統裁剪
  • FW層的原理
  • 各種開發調試工具
  • 智能設備開發
  • 分布式開發等等。

這些就是對往后開發者的分享,希望大家多多點贊關注喔!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12268.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12268.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12268.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

增程SUV價格即將崩盤?買車一定要再等等!

文 | AUTO芯球 作者 | 雷歌? 真是“離譜”啊,車圈真是逗比歡樂多, 我這兩天看一個博主連續40多小時開車直播,充電口、油箱蓋全部封死,全程視頻直播沒斷過, 就為了測試這兩天剛上市的星際元ET續航有多遠。 另一個…

Docker 創建網絡

問題: 1.需要將多個容器添加到同一個網絡. 2.docker-compose.yaml 如果不指定,默認會重新創建一個網卡. 創建網卡 docker network create -d bridge mynet ##-d 指定模式(默認橋接)查看自定義網絡信息 docker inspect mynet…

NSSCTF Web方向的例題和相關知識點(二)

[SWPUCTF 2021 新生賽]Do_you_know_http 解題: 點擊打開環境,是 提示說請使用wLLm瀏覽器訪問 我們可以更改瀏覽器信息,在burp重放器中發包后發現是302重定向,但是提示說success成功,說明 我們修改是成功的&#xff…

HTML特殊字符

特殊字符 有特殊含義的字符成為字符實體 對于有特殊含義的字符,需要通過轉移字符來表示 <span> <br><a href"http://www.atguigu.com">我 愛 前端</a> <br>&amp;amp; 效果

Element-UI 快速入門指南

文章目錄 一、安裝 Element-UI1.1 使用 npm 安裝1.2 使用 yarn 安裝 二、引入 Element-UI三、使用 Element-UI 組件3.1 按鈕組件3.2 輸入框組件3.3 表單組件3.4 表格組件3.5 彈框組件 四、自定義主題4.1 安裝主題工具4.2 初始化變量文件4.3 編譯主題 五、總結 &#x1f389;歡迎…

刷題之最長連續序列

哈希表 class Solution { public:int longestConsecutive(vector<int>& nums) {//set記錄并且去重nums中的數unordered_set<int>set;for(int i0;i<nums.size();i){set.insert(nums[i]);}int result0;//遍歷所有數for(auto iset.begin();i!set.end();i){//如…

服務的war包已經丟在tomcat中但是還是沒法訪問,如何排查?

問題出現的現象是我已經將 XWiki 的 WAR 包放置在 Tomcat 的 webapps目錄下但仍然無法訪問&#xff0c;反思之后可以從下面以下幾個方面來診斷和解決問題&#xff1a; 1. 確認 Tomcat 正在運行 首先&#xff0c;確保 Tomcat 服務正在正常運行。可以使用以下命令檢查 Tomcat 的…

鑒源論壇·觀通丨軌交軟件測試技術詳述

作者 | 劉艷青 上海控安安全測評部測試經理 版塊 | 鑒源論壇 觀通 社群 | 添加微信號“TICPShanghai”加入“上海控安51fusa安全社區” 01 集成測試技術要求 1.1 總體要求 對軟件集成測試進行靜態測試應先于動態測試&#xff1b; 集成過程是動態進行的&#xff0c;在測…

圖紙加密軟件是如何實現共享服務器圖紙防泄密?Cad圖紙防泄密廣州廠家

現在企業網絡數據安全的問題已經在社會的發展過程中引起了關注&#xff0c;尤其對研發制造類企業而言&#xff0c;企業設計圖紙的防泄密問題是這些企業在日后工作管理中的重中之重。在當今的互聯網發展形勢下&#xff0c;廣州的制造類設計企業為不讓單位圖紙泄露&#xff0c;也…

CVHub | CVPR 2024 | 英偉達發布新一代視覺基礎模型: AM-RADIO = CLIP + DINOv2 + SAM

本文來源公眾號“CVHub”&#xff0c;僅用于學術分享&#xff0c;侵權刪&#xff0c;干貨滿滿。 原文鏈接&#xff1a;CVPR 2024 | 英偉達發布新一代視覺基礎模型: AM-RADIO CLIP DINOv2 SAM 標題&#xff1a;《AM-RADIO: Agglomerative Vision Foundation Model Reduce Al…

vscode 之 output 輸出中文亂碼,終端輸出中文正常

# 1. 背景 因為沒錢買正版的軟件&#xff0c;所以轉戰 vscode 編譯器。 在編譯 python 文件時&#xff0c;發現直接右鍵 runner code&#xff0c;輸出中文亂碼。 但是在 teiminal 終端 執行py test.py 時&#xff0c;輸出正常&#xff0c;中文正常。 output 輸出中文樣式(中文…

java相等忽略音調

來自百度,親測可用 java相等忽略音調 在Java中&#xff0c;如果你想比較兩個字符串而忽略它們的音調符號&#xff0c;你可以使用java.text.Collator類來進行區域敏感的字符串比較。Collator類提供了根據特定區域的規則進行字符串比較的能力&#xff0c;可以設置忽略音調的選項…

Go微服務: Prometheus性能監控與Grafana平臺的搭建

Prometheus 概述 promethues 是一套開源的監控&報警&時間序列數據庫的組合基本原理是通過http協議周期性抓取被監控組件的狀態適合Docker、Kubernetes環境的監控系統 Promethues 整體架構 一、抓取數據的兩種方式 1 &#xff09;Short-lived jobs 短暫的任務 不會提…

RedisTemplate操作Redis詳解之連接Redis及自定義序列化

連接到Redis 使用Redis和Spring時的首要任務之一是通過IoC容器連接到Redis。為此&#xff0c;需要java連接器&#xff08;或綁定&#xff09;。無論選擇哪種庫&#xff0c;你都只需要使用一組Spring Data Redis API&#xff08;在所有連接器中行為一致&#xff09;&#xff1a;…

面對.halo勒索病毒,如何有效防范與應對?

導言&#xff1a; 隨著網絡技術的不斷發展&#xff0c;網絡安全問題也日益凸顯。其中&#xff0c;勒索病毒作為一種極具破壞性的網絡攻擊手段&#xff0c;近年來在全球范圍內頻發。其中&#xff0c;.halo勒索病毒作為勒索病毒家族中的一員&#xff0c;其危害性和傳播性不容忽視…

StNet: Local and Global Spatial-Temporal Modeling for Action Recognition 論文閱讀

StNet: Local and Global Spatial-Temporal Modeling for Action Recognition 論文閱讀 Abstract1 Introduction2 Related Work3 Proposed Approach4 Experiments5 Conclusion 文章信息&#xff1a; 原文鏈接&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/4…

Flutter 中的 Spacer 小部件:全面指南

Flutter 中的 Spacer 小部件&#xff1a;全面指南 在Flutter布局系統中&#xff0c;Spacer是一個Flex組件&#xff0c;用于占據可用空間&#xff0c;從而推動其他Widget到布局的開始或結束位置。Spacer通常與Row、Column或Flex一起使用&#xff0c;以實現靈活的布局設計。本文…

二叉樹專題(有關二叉樹的相關學習)

二叉樹 1.數概念及結構 1.1樹的結構 樹是一種非線性的數據結構&#xff0c;它是由n&#xff08;n>0&#xff09;個有限結點組成一個具有層次關系的集合。把它叫做樹是因 為它看起來像一棵倒掛的樹&#xff0c;也就是說它是根朝上&#xff0c;而葉朝下的。 有一個特殊的結…

ollama離線部署llama3(window系統)

首先介紹下ollama是什么&#xff1f;Ollama是一個開源的大型語言模型服務工具&#xff0c;旨在為用戶提供本地化的運行環境&#xff0c;滿足個性化的需求。具體來說&#xff0c;Ollama是一個功能強大的開源框架&#xff0c;可以簡化在Docker容器中部署和管理大型語言模型&a…

【C++】內聯函數、auto、范圍for

文章目錄 1.內聯函數2.auto關鍵字2.1auto簡介2.2auto的注意事項2.3auto不能推導的場景 3.基于范圍的for循環(C11)4.指針空值nullptr(C11) 1.內聯函數 概念&#xff1a; 以inline修飾的函數叫做內聯函數&#xff0c;編譯時C編譯器會在調用內聯函數的地方展開&#xff0c;沒有函…