鴻蒙ArkUI開發(fā)：【彈性布局（主軸&交叉軸對(duì)齊方式）】
主軸對(duì)齊方式
通過justifyContent參數(shù)設(shè)置在主軸方向的對(duì)齊方式，和Row、Column的主軸對(duì)齊方式行為一樣 
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
交叉軸對(duì)齊方式
可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對(duì)齊方式，子組件默認(rèn)使用Flex組件的對(duì)齊方式。但也可以通過alignSelf單獨(dú)設(shè)置對(duì)齊方式
Flex({ alignItems: ItemAlign.Start })
ItemAlign.Auto：使用Flex容器中默認(rèn)配置。 
ItemAlign.Start：交叉軸方向首部對(duì)齊 
ItemAlign.Center：交叉軸方向居中對(duì)齊 
ItemAlign.End：交叉軸方向底部對(duì)齊 
子組件通過[alignSelf]設(shè)置在父容器交叉軸的對(duì)齊格式，覆蓋Flex布局容器中alignItems配置
審核編輯 黃宇
聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。
舉報(bào)投訴
-
組件
+關(guān)注
關(guān)注
1文章
603瀏覽量
19070 -
鴻蒙
+關(guān)注
關(guān)注
60文章
3031瀏覽量
46194
發(fā)布評(píng)論請先 登錄
相關(guān)推薦
熱點(diǎn)推薦
【匯思博SEEK100開發(fā)板試用體驗(yàn)】03 簡約風(fēng)天氣APP開發(fā)--首頁UI布局及組件介紹
1 前言
本次開發(fā)板的評(píng)測最終目標(biāo)是做出來一個(gè)簡約風(fēng)格的天氣APP?，F(xiàn)在從0開始學(xué)習(xí)基于openharmony的鴻蒙開發(fā)。這次先完成主界面的排版和布局，把應(yīng)用大體框架確定下來。
2 線
發(fā)表于 07-08 13:32
【HarmonyOS next】ArkUI-X休閑娛樂搞笑日歷【基礎(chǔ)】
性能優(yōu)化（華為設(shè)備平均加載時(shí)間<800ms）
關(guān)鍵收獲：ArkUI-X的ImageFit.Fill模式在不同屏幕比例設(shè)備上表現(xiàn)出色，配合響應(yīng)式布局可消除90%的適配問題。
未來可探索方向
發(fā)表于 06-28 22:07
【HarmonyOS next】ArkUI-X新聞熱搜聚合App【進(jìn)階】
通過ArkUI-X將鴻蒙下的新聞熱搜聚合App轉(zhuǎn)換為iOS
一、項(xiàng)目背景與技術(shù)選型
1.1 項(xiàng)目概述
本案例基于鴻蒙（HarmonyOS）開發(fā)的聚合熱搜熱榜應(yīng)用，通過調(diào)用韓小韓博客提供
發(fā)表于 06-28 21:43
【HarmonyOS next】ArkUI-X休閑益智兒童拼圖【進(jìn)階】
項(xiàng)目，我們驗(yàn)證了ArkUI-X框架的強(qiáng)大跨端能力。無論是華為的鴻蒙系統(tǒng)，還是iOS平臺(tái)，都能保持90%以上代碼復(fù)用率，真正實(shí)現(xiàn)了\"一次開發(fā)，多端部署\"的理想狀態(tài)。期待
發(fā)表于 06-28 21:41
【HarmonyOS next】ArkUI-X休閑益智猜字謎【基礎(chǔ)】
}
}
使用Flex+ForEach實(shí)現(xiàn)響應(yīng)式布局，lpx單位自動(dòng)適配不同屏幕密度。
四、ArkUI-X vs Flutter技術(shù)對(duì)比
特性
ArkUI-X
Flutter
開發(fā)語
發(fā)表于 06-26 20:01
網(wǎng)格布局介紹
layoutDirection方向上排列。
僅設(shè)置rowsTemplate時(shí)，Grid主軸為水平方向，交叉軸為垂直方向。
僅設(shè)置columnsTemplate時(shí)，Grid主軸為垂直方向
發(fā)表于 06-25 06:27
鴻蒙5開發(fā)寶藏案例分享---分析幀率問題
;/span>布局耗時(shí)超標(biāo)。
分析工具 ：
ArkUI Inspector ：可視化查看組件樹，定位冗余嵌套。
Frame Profiler ：<span
發(fā)表于 06-12 17:07
鴻蒙5開發(fā)寶藏案例分享---性能體驗(yàn)設(shè)計(jì)
丟幀≤3幀
// 優(yōu)化前：每次滾動(dòng)都重新計(jì)算布局
@State items: Array<string> = [...]
build() {
List
發(fā)表于 06-12 16:45
鴻蒙5開發(fā)寶藏案例分享---Pura X開發(fā)案例分享
?** 鴻蒙寶藏案例分享：Pura X 外屏開發(fā)實(shí)戰(zhàn)解析**
大家好！我是你們的鴻蒙開發(fā)小伙伴。今天在翻閱官方文檔時(shí)，意外發(fā)現(xiàn)了華為藏著的\"寶藏級(jí)\"案例——Pura X 折疊
發(fā)表于 06-12 11:47
鴻蒙Next實(shí)現(xiàn)瀑布流布局
好鴻蒙開發(fā)環(huán)境。打開 DevEco Studio，新建一個(gè)鴻蒙應(yīng)用項(xiàng)目，選擇合適的模板（如 Empty Feature Ability），設(shè)置項(xiàng)目名稱、包名等信息，完成項(xiàng)目創(chuàng)建。
## 二、
發(fā)表于 06-10 14:17
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實(shí)例（地圖導(dǎo)航）
規(guī)劃頁 ：面板滑動(dòng)時(shí)布局自適應(yīng)變形
3?? 服務(wù)卡片 ：八宮格靜態(tài)卡片多端通吃
4?? 實(shí)況窗 ：膠囊形態(tài)+卡片形態(tài)雙展示
最絕的是所有效果都用****ArkUI框架實(shí)現(xiàn)，完全遵循\"一次開發(fā)
發(fā)表于 06-03 16:17
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實(shí)例（股票類）
}
? 關(guān)鍵點(diǎn)：Blank組件實(shí)現(xiàn)彈性留白，不同列獨(dú)立設(shè)置對(duì)齊方式
三、開發(fā)避坑指南
柵格監(jiān)聽防抖處理
斷點(diǎn)變化時(shí)記得加200ms延遲，避免頻繁重繪
多端圖片適配技巧
Image(
發(fā)表于 06-03 16:13
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實(shí)例（圖片美化）
?【鴻蒙開發(fā)寶藏案例分享】一次搞定多端適配的圖片美化應(yīng)用開發(fā)思路！?
Hey小伙伴們~ 今天在翻鴻蒙文檔時(shí)挖到一個(gè)超實(shí)用的大寶藏！原來官方早就悄悄提供了超多\"一多
發(fā)表于 06-03 16:09
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實(shí)例（長視頻）
class=\"ne-text\">@ohos.mediaquery</span>
彈性布局：&
發(fā)表于 06-03 15:58
鴻蒙5開發(fā)寶藏案例分享---折疊屏懸停態(tài)開發(fā)實(shí)踐
?【鴻蒙折疊屏開發(fā)寶藏指南】原來官方藏了這么多好東西！手把手教你玩轉(zhuǎn)懸停態(tài)開發(fā)**?**
Hey小伙伴們！我是你們的老朋友XX，最近在肝鴻蒙折疊屏項(xiàng)目時(shí)，意外挖到了官方文檔里的隱藏寶藏
發(fā)表于 06-03 12:04
評(píng)論