0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

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

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

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

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-14 09:23 ? 次閱讀

彈性布局方向圖

Flex({ direction: FlexDirection.Row })

image.png

  1. FlexDirection.Row(默認(rèn)值):主軸為水平方向,子組件從起始端沿著水平方向開(kāi)始排布
  2. FlexDirection.RowReverse:主軸為水平方向,子組件從終點(diǎn)端沿著FlexDirection. Row相反的方向開(kāi)始排布
  3. FlexDirection.Column:主軸為垂直方向,子組件從起始端沿著垂直方向開(kāi)始排布
  4. FlexDirection.ColumnReverse:主軸為垂直方向,子組件從終點(diǎn)端沿著FlexDirection. Column相反的方向開(kāi)始排布
  5. 開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

主軸為水平方向的Flex容器示意圖

image.png

審核編輯 黃宇

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

    關(guān)注

    57

    文章

    2272

    瀏覽量

    42526
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    鴻蒙跨端實(shí)踐-布局方案介紹

    作者:京東科技 劉寧 一、前言 動(dòng)態(tài)化使用 jue 語(yǔ)言(開(kāi)發(fā)風(fēng)格與 Vue 一致)開(kāi)發(fā),對(duì)于視圖的布局采用了標(biāo)準(zhǔn)的Flex 布局方式。對(duì)于列表類視圖,動(dòng)態(tài)化提供了、、、等標(biāo)簽,將子視
    的頭像 發(fā)表于 09-18 10:26 ?668次閱讀
    <b class='flag-5'>鴻蒙</b>跨端實(shí)踐-<b class='flag-5'>布局</b>方案介紹

    鴻蒙ArkUI-X跨平臺(tái)開(kāi)發(fā):【 編寫(xiě)第一個(gè)ArkUI-X應(yīng)用】

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

    鴻蒙應(yīng)用布局ArkUI【基礎(chǔ)運(yùn)用案例】

    平級(jí)導(dǎo)航的復(fù)合網(wǎng)格視圖常出現(xiàn)在同時(shí)展示多種不同內(nèi)容的界面。
    的頭像 發(fā)表于 05-17 11:19 ?340次閱讀
    <b class='flag-5'>鴻蒙</b>應(yīng)<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>【基礎(chǔ)運(yùn)用案例】

    鴻蒙應(yīng)用布局ArkUI:【其他常用布局容器和組件】介紹

    創(chuàng)建輪播(Swiper)實(shí)現(xiàn)輪播功能
    的頭像 發(fā)表于 05-15 20:22 ?352次閱讀
    <b class='flag-5'>鴻蒙</b>應(yīng)<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>:【其他<b class='flag-5'>常用布局</b>容器和組件】介紹

    鴻蒙ArkUI開(kāi)發(fā)常用布局【創(chuàng)建網(wǎng)格(Grid/GridItem)】

    網(wǎng)格布局主要用于處理固定行列的UI,也支持動(dòng)態(tài)調(diào)整。很類似iOS中的UICollectionView。
    的頭像 發(fā)表于 05-15 16:24 ?562次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開(kāi)發(fā)</b>:<b class='flag-5'>常用布局</b>【創(chuàng)建網(wǎng)格(Grid/GridItem)】

    鴻蒙ArkUI開(kāi)發(fā)常用布局【 創(chuàng)建列表(List)】

    列表容器是為了高效處理長(zhǎng)列表的容器,能支持橫向、豎向滾動(dòng),數(shù)據(jù)分組,分組頭懸浮等功能
    的頭像 發(fā)表于 05-15 15:30 ?535次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開(kāi)發(fā)</b>:<b class='flag-5'>常用布局</b>【 創(chuàng)建列表(List)】

    鴻蒙ArkUI開(kāi)發(fā)常用布局【相對(duì)布局

    相對(duì)布局可以讓子元素指定兄弟元素或父容器作為錨點(diǎn),基于錨點(diǎn)做位置布局
    的頭像 發(fā)表于 05-14 20:50 ?380次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開(kāi)發(fā)</b>:<b class='flag-5'>常用布局</b>【相對(duì)<b class='flag-5'>布局</b>】

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

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

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

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

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

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

    鴻蒙ArkUI之【如何選擇布局?】

    聲明式UI提供了以下9種常見(jiàn)布局,開(kāi)發(fā)者可根據(jù)實(shí)際應(yīng)用場(chǎng)景選擇合適的布局進(jìn)行頁(yè)面開(kāi)發(fā)。
    的頭像 發(fā)表于 05-13 15:37 ?380次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>之【如何選擇<b class='flag-5'>布局</b>?】

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

    長(zhǎng)度分配設(shè)置為最常用場(chǎng)景的布局結(jié)果,使子組件主軸長(zhǎng)度總和等于Flex容器主軸長(zhǎng)度。 最后 如果大家覺(jué)得這篇內(nèi)容對(duì)學(xué)習(xí)鴻蒙開(kāi)發(fā)有幫助,我想邀請(qǐng)大家?guī)臀胰齻€(gè)小忙: 點(diǎn)贊,轉(zhuǎn)發(fā),有你們的 『
    發(fā)表于 05-10 14:26

    HarmonyOS開(kāi)發(fā)ArkUI案例:【常用布局容器對(duì)齊方式】

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

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

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

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

    對(duì)于剛剛接觸OpenHarmony應(yīng)用開(kāi)發(fā)開(kāi)發(fā)者,最快的入門(mén)方式就是開(kāi)發(fā)一個(gè)簡(jiǎn)單的應(yīng)用,下面記錄了一個(gè)日歷應(yīng)用的開(kāi)發(fā)過(guò)程,通過(guò)日歷應(yīng)用的開(kāi)發(fā)
    發(fā)表于 01-17 21:37