搜索歷史

清空
搜索熱詞
      0
      • 聊天消息
      • 系統(tǒng)消息
      • 評論與回復(fù)
      VIP于 到期 續(xù)費
      登錄后你可以
      • 下載海量資料
      • 學(xué)習(xí)在線課程
      • 觀看技術(shù)視頻
      • 寫文章/發(fā)帖/加入社區(qū)
      會員中心
      創(chuàng)作中心
      發(fā)布
      創(chuàng)作活動

      完善資料讓更多小伙伴認識你，還能領(lǐng)取20積分哦，立即完善>

      3天內(nèi)不再提示

      鴻蒙ArkUI開發(fā)：【彈性布局（主軸&交叉軸對齊方式）】

      jf_46214456 ? 來源：jf_46214456 ? 作者：jf_46214456 ? 2024-05-14 15:33 ? 次閱讀

      主軸對齊方式

      通過justifyContent參數(shù)設(shè)置在主軸方向的對齊方式，和Row、Column的主軸對齊方式行為一樣 image.png

      開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

      交叉軸對齊方式

      可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式，子組件默認使用Flex組件的對齊方式。但也可以通過alignSelf單獨設(shè)置對齊方式

      Flex({ alignItems: ItemAlign.Start })

      ItemAlign.Auto：使用Flex容器中默認配置。 image.png ItemAlign.Start：交叉軸方向首部對齊 image.png ItemAlign.Center：交叉軸方向居中對齊 image.png ItemAlign.End：交叉軸方向底部對齊 image.png 子組件通過[alignSelf]設(shè)置在父容器交叉軸的對齊格式，覆蓋Flex布局容器中alignItems配置

      image.png

      審核編輯 黃宇

      聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。 舉報投訴
      • 組件
        +關(guān)注

        關(guān)注

        1

        文章

        496

        瀏覽量

        17743
      • 鴻蒙
        +關(guān)注

        關(guān)注

        57

        文章

        2272

        瀏覽量

        42526
      收藏 人收藏

        評論

        相關(guān)推薦

        基于ArkTS語言的OpenHarmony APP應(yīng)用開發(fā)：圖片顯示器

        ）alignItems：**參數(shù)類型為 VerticalAlign ，表示子組件在豎直方向上的布局方。式， VerticalAlign 定義了一下三種對其方式： Top：設(shè)置子組件在豎直方向上居頂部對齊
        發(fā)表于 09-14 14:22

        鴻蒙開發(fā)ArkUI-X基礎(chǔ)知識：【ArkUI代碼工程及構(gòu)建介紹】

        ArkUI作為OpenHarmony的默認開發(fā)框架，在本項目（ArkUI-X）中需要做到一套代碼同時支持多平臺構(gòu)建，所以會采取共倉開發(fā)的方式
        的頭像 發(fā)表于 05-25 16:45 ?1878次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發(fā)</b><b class='flag-5'>ArkUI</b>-X基礎(chǔ)知識：【<b class='flag-5'>ArkUI</b>代碼工程及構(gòu)建介紹】

        鴻蒙ArkUI-X跨平臺技術(shù)：【開發(fā)準(zhǔn)備】

        本文檔適用于ArkUI跨平臺應(yīng)用開發(fā)的初學(xué)者。通過開發(fā)環(huán)境搭建、應(yīng)用工程創(chuàng)建、編譯和運行，熟悉ArkUI跨平臺應(yīng)用開發(fā)基本流程。
        的頭像 發(fā)表于 05-24 10:40 ?318次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>-X跨平臺技術(shù)：【<b class='flag-5'>開發(fā)</b>準(zhǔn)備】

        鴻蒙ArkUI-X跨平臺開發(fā)：【 編寫第一個ArkUI-X應(yīng)用】

        通過構(gòu)建一個簡單的ArkUI頁面跳轉(zhuǎn)示例，快速了解資源創(chuàng)建引用，路由代碼編寫和UI布局編寫等應(yīng)用開發(fā)流程。
        的頭像 發(fā)表于 05-21 17:36 ?489次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>-X跨平臺<b class='flag-5'>開發(fā)</b>：【 編寫第一個<b class='flag-5'>ArkUI</b>-X應(yīng)用】

        鴻蒙ArkUI開發(fā)：常用布局【交叉軸】

        垂直于主軸方向的軸線。Row容器交叉軸為縱向，Column容器交叉軸為橫向。
        的頭像 發(fā)表于 05-14 09:52 ?421次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發(fā)</b>：常用<b class='flag-5'>布局</b>【<b class='flag-5'>交叉</b><b class='flag-5'>軸</b>】

        鴻蒙ArkUI開發(fā)：常用布局【彈性布局方向圖】

        FlexDirection.Row（默認值）：主軸為水平方向，子組件從起始端沿著水平方向開始排布
        的頭像 發(fā)表于 05-14 09:23 ?286次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發(fā)</b>：常用<b class='flag-5'>布局</b>【<b class='flag-5'>彈性</b><b class='flag-5'>布局</b>方向圖】

        鴻蒙ArkUI開發(fā)：常用布局【主軸】

        線性布局的子元素在線性方向上（水平方向和垂直方向）依次排列
        的頭像 發(fā)表于 05-13 17:33 ?759次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發(fā)</b>：常用<b class='flag-5'>布局</b>【<b class='flag-5'>主軸</b>】

        鴻蒙ArkUI：【編程范式：命令式-&amp;gt;聲明式】

        簡單講就是需要開發(fā)用代碼一步一步進行布局，這個過程需要開發(fā)全程參與。
        的頭像 發(fā)表于 05-13 16:32 ?577次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>：【編程范式：命令式-&<b class='flag-5'>amp</b>;gt;聲明式】

        鴻蒙ArkUI：【從代碼到UI顯示的整體渲染流程】

        方舟開發(fā)框架（簡稱ArkUI）是鴻蒙開發(fā)的UI框架，提供如下兩種開發(fā)范式，我們 **只學(xué)聲明式開發(fā)
        的頭像 發(fā)表于 05-13 16:06 ?617次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>：【從代碼到UI顯示的整體渲染流程】

        HarmonyOS實戰(zhàn)開發(fā)-Flex布局性能提升使用指導(dǎo)

        長度分配設(shè)置為最常用場景的布局結(jié)果，使子組件主軸長度總和等于Flex容器主軸長度。 最后 如果大家覺得這篇內(nèi)容對學(xué)習(xí)鴻蒙開發(fā)有幫助，我想邀請
        發(fā)表于 05-10 14:26

        HarmonyOS開發(fā)ArkUI案例：【常用布局容器對齊方式】

        基于ArkTS擴展的聲明式開發(fā)范式，實現(xiàn)Flex、Column、Row和Stack四種常用布局容器對齊方式。
        的頭像 發(fā)表于 05-08 16:47 ?1359次閱讀
        HarmonyOS<b class='flag-5'>開發(fā)</b><b class='flag-5'>ArkUI</b>案例：【常用<b class='flag-5'>布局</b>容器<b class='flag-5'>對齊</b><b class='flag-5'>方式</b>】

        鴻蒙ArkUI開發(fā)學(xué)習(xí)：【渲染控制語法】

        ArkUI開發(fā)框架是一套構(gòu)建 HarmonyOS / OpenHarmony 應(yīng)用界面的聲明式UI開發(fā)框架，它支持程序使用?`if/else`?條件渲染，?`ForEach`?循環(huán)渲染以及?`LazyForEach`?懶加載渲染
        的頭像 發(fā)表于 04-09 16:40 ?809次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發(fā)</b>學(xué)習(xí)：【渲染控制語法】

        鴻蒙ArkUI開發(fā)-Tabs組件的使用

        鴻蒙ArkUI開發(fā)-Tabs組件的使用
        的頭像 發(fā)表于 01-19 16:01 ?1456次閱讀
        <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發(fā)</b>-Tabs組件的使用

        鴻蒙NEXT-Column和Row組件的使用

        屬性介紹 了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉
        發(fā)表于 01-18 16:44

        鴻蒙開發(fā)-ArkUI框架實戰(zhàn)【日歷應(yīng)用 】

        對于剛剛接觸OpenHarmony應(yīng)用開發(fā)的開發(fā)者，最快的入門方式就是開發(fā)一個簡單的應(yīng)用，下面記錄了一個日歷應(yīng)用的開發(fā)過程，通過日歷應(yīng)用的
        發(fā)表于 01-17 21:37