日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鴻蒙HarmonyOSJavaUI之DirectionalLayout布局

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為越城企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站建設(shè)，越城網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

在之前的章節(jié)中我使用的是Java 代碼構(gòu)建UI界面，從本節(jié)開始，將使用XML構(gòu)建UI界面。

使用XML構(gòu)建UI(默認你已經(jīng)會在項目中創(chuàng)建XML布局文件)界面相對Java代碼構(gòu)建的好處是：結(jié)構(gòu)清晰，代碼簡潔。

DirectionalLayout(單一方向排列布局)是Java UI的一種重要的組件布局，用于將一組組件按照水平或垂直方向排布，能夠方便地對齊布局內(nèi)的組件。與Android中的線性布局相似。可以通過設(shè)置orientation屬性來控制組件的排列方式，默認為垂直排列。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.                    ohos:width="match_parent"
    4. 
  
  
  
  
  4.                    ohos:height="match_parent"
    5. 
  
  
  
  
  5.                    ohos:background_element="#FFCCCCCC"
    6. 
  
  
  
  
  6.                    ohos:orientation="vertical">
    7. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:id="$+id:txtOne"
    9. 
  
  
  
  
  9.         ohos:width="match_content"
    10. 
  
  
  
  
  10.         ohos:height="match_content"
    11. 
  
  
  
  
  11.         ohos:padding="20vp"
    12. 
  
  
  
  
  12.         ohos:margin="20vp"
    13. 
  
  
  
  
  13.         ohos:text_size="30vp"
    14. 
  
  
  
  
  14.         ohos:text_color="#FFFFFFFF"
    15. 
  
  
  
  
  15.         ohos:background_element="#FFFF00FF"
    16. 
  
  
  
  
  16.         ohos:text="我是第一個"/>
    17. 
  
  
  
  
  17. 
  
  
  
  
  18.     
  
  
  
  
  19.         ohos:id="$+id:txtTwo"
    20. 
  
  
  
  
  20.         ohos:width="match_content"
    21. 
  
  
  
  
  21.         ohos:height="match_content"
    22. 
  
  
  
  
  22.         ohos:padding="20vp"
    23. 
  
  
  
  
  23.         ohos:margin="20vp"
    24. 
  
  
  
  
  24.         ohos:text_size="30vp"
    25. 
  
  
  
  
  25.         ohos:text_color="#FFFFFFFF"
    26. 
  
  
  
  
  26.         ohos:background_element="#FFFF00FF"
    27. 
  
  
  
  
  27.         ohos:text="我是第二個"/>
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.     
  
  
  
  
  30.         ohos:id="$+id:txtThird"
    31. 
  
  
  
  
  31.         ohos:width="match_content"
    32. 
  
  
  
  
  32.         ohos:height="match_content"
    33. 
  
  
  
  
  33.         ohos:padding="20vp"
    34. 
  
  
  
  
  34.         ohos:margin="20vp"
    35. 
  
  
  
  
  35.         ohos:text_size="30vp"
    36. 
  
  
  
  
  36.         ohos:text_color="#FFFFFFFF"
    37. 
  
  
  
  
  37.         ohos:background_element="#FFFF00FF"
    38. 
  
  
  
  
  38.         ohos:text="我是第三個"/>
    39. 
  
  
  
  
  39. 
  
  
  
  
  40.

將上面代碼中的ohos:orientation="vertical"換成ohos:orientation="horizontal" 然后運行查看效果如下所示。

DirectionalLayout布局中的組件不會自動換行，會按照設(shè)定的方向依次排列，若超出布局本身大小，超出布局大小的部分將不會顯示。我們將上面示例代碼中的Text組件寬度設(shè)定為400vp，然后運行效果如下所示，我們可以看到，第三個Text組件顯示了一部分。

DirectionalLayout中的組件使用layout_alignment控制自身在布局中的對齊方式，當對齊方式與排列方式一致時，對齊方式不會生效，如布局為水平方法排列，則其下組件左對齊、右對齊將不會生效。因為布局中可以嵌套布局來豐富UI樣式，我們可以使用這個方式來演示一下對齊樣式。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.                    ohos:width="match_parent"
    4. 
  
  
  
  
  4.                    ohos:height="match_parent"
    5. 
  
  
  
  
  5.                    ohos:orientation="vertical">
    6. 
  
  
  
  
  6.     
  
  
  
  
  7.             ohos:width="match_parent"
    8. 
  
  
  
  
  8.             ohos:height="0vp"
    9. 
  
  
  
  
  9.             ohos:weight="2"
    10. 
  
  
  
  
  10.             ohos:margin="10vp"
    11. 
  
  
  
  
  11.             ohos:background_element="#FFDDDDDD"
    12. 
  
  
  
  
  12.             ohos:orientation="vertical">
    13. 
  
  
  
  
  13.         
  
  
  
  
  14.                 ohos:width="match_content"
    15. 
  
  
  
  
  15.                 ohos:height="match_content"
    16. 
  
  
  
  
  16.                 ohos:padding="10vp"
    17. 
  
  
  
  
  17.                 ohos:margin="10vp"
    18. 
  
  
  
  
  18.                 ohos:text_size="20vp"
    19. 
  
  
  
  
  19.                 ohos:text_color="#FFFFFFFF"
    20. 
  
  
  
  
  20.                 ohos:layout_alignment="left"
    21. 
  
  
  
  
  21.                 ohos:background_element="#FFFF00FF"
    22. 
  
  
  
  
  22.                 ohos:text="左對齊"/>
    23. 
  
  
  
  
  23. 
  
  
  
  
  24.         
  
  
  
  
  25.                 ohos:width="match_content"
    26. 
  
  
  
  
  26.                 ohos:height="match_content"
    27. 
  
  
  
  
  27.                 ohos:padding="10vp"
    28. 
  
  
  
  
  28.                 ohos:margin="10vp"
    29. 
  
  
  
  
  29.                 ohos:text_size="20vp"
    30. 
  
  
  
  
  30.                 ohos:text_color="#FFFFFFFF"
    31. 
  
  
  
  
  31.                 ohos:layout_alignment="horizontal_center"
    32. 
  
  
  
  
  32.                 ohos:background_element="#FFFF00FF"
    33. 
  
  
  
  
  33.                 ohos:text="水平方向居中"/>
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.         
  
  
  
  
  36.                 ohos:width="match_content"
    37. 
  
  
  
  
  37.                 ohos:height="match_content"
    38. 
  
  
  
  
  38.                 ohos:padding="10vp"
    39. 
  
  
  
  
  39.                 ohos:margin="10vp"
    40. 
  
  
  
  
  40.                 ohos:text_size="20vp"
    41. 
  
  
  
  
  41.                 ohos:text_color="#FFFFFFFF"
    42. 
  
  
  
  
  42.                 ohos:layout_alignment="right"
    43. 
  
  
  
  
  43.                 ohos:background_element="#FFFF00FF"
    44. 
  
  
  
  
  44.                 ohos:text="右對齊"/>
    45. 
  
  
  
  
  45.         
  
  
  
  
  46.                 ohos:width="match_content"
    47. 
  
  
  
  
  47.                 ohos:height="match_content"
    48. 
  
  
  
  
  48.                 ohos:padding="10vp"
    49. 
  
  
  
  
  49.                 ohos:margin="10vp"
    50. 
  
  
  
  
  50.                 ohos:text_size="20vp"
    51. 
  
  
  
  
  51.                 ohos:text_color="#FFFFFFFF"
    52. 
  
  
  
  
  52.                 ohos:layout_alignment="center"
    53. 
  
  
  
  
  53.                 ohos:background_element="#FFFF00FF"
    54. 
  
  
  
  
  54.                 ohos:text="垂直與水平方向都居中"/>
    55. 
  
  
  
  
  55.     
    56. 
  
  
  
  
  56.     
  
  
  
  
  57.             ohos:width="match_parent"
    58. 
  
  
  
  
  58.             ohos:height="0vp"
    59. 
  
  
  
  
  59.             ohos:margin="10vp"
    60. 
  
  
  
  
  60.             ohos:weight="1"
    61. 
  
  
  
  
  61.             ohos:background_element="#FFCCCCCC"
    62. 
  
  
  
  
  62.             ohos:orientation="horizontal">
    63. 
  
  
  
  
  63.         
  
  
  
  
  64.                 ohos:width="match_content"
    65. 
  
  
  
  
  65.                 ohos:height="match_content"
    66. 
  
  
  
  
  66.                 ohos:padding="10vp"
    67. 
  
  
  
  
  67.                 ohos:margin="10vp"
    68. 
  
  
  
  
  68.                 ohos:text_size="20vp"
    69. 
  
  
  
  
  69.                 ohos:text_color="#FFFFFFFF"
    70. 
  
  
  
  
  70.                 ohos:layout_alignment="top"
    71. 
  
  
  
  
  71.                 ohos:background_element="#FFFF00FF"
    72. 
  
  
  
  
  72.                 ohos:text="頂部對齊"/>
    73. 
  
  
  
  
  73. 
  
  
  
  
  74.         
  
  
  
  
  75.                 ohos:width="match_content"
    76. 
  
  
  
  
  76.                 ohos:height="match_content"
    77. 
  
  
  
  
  77.                 ohos:padding="10vp"
    78. 
  
  
  
  
  78.                 ohos:margin="10vp"
    79. 
  
  
  
  
  79.                 ohos:text_size="20vp"
    80. 
  
  
  
  
  80.                 ohos:text_color="#FFFFFFFF"
    81. 
  
  
  
  
  81.                 ohos:layout_alignment="vertical_center"
    82. 
  
  
  
  
  82.                 ohos:background_element="#FFFF00FF"
    83. 
  
  
  
  
  83.                 ohos:text="垂直方向居中"/>
    84. 
  
  
  
  
  84. 
  
  
  
  
  85.         
  
  
  
  
  86.                 ohos:width="match_content"
    87. 
  
  
  
  
  87.                 ohos:height="match_content"
    88. 
  
  
  
  
  88.                 ohos:padding="10vp"
    89. 
  
  
  
  
  89.                 ohos:margin="10vp"
    90. 
  
  
  
  
  90.                 ohos:text_size="20vp"
    91. 
  
  
  
  
  91.                 ohos:text_color="#FFFFFFFF"
    92. 
  
  
  
  
  92.                 ohos:layout_alignment="bottom"
    93. 
  
  
  
  
  93.                 ohos:background_element="#FFFF00FF"
    94. 
  
  
  
  
  94.                 ohos:text="底部對齊"/>
    95. 
  
  
  
  
  95.         
  
  
  
  
  96.                 ohos:width="match_content"
    97. 
  
  
  
  
  97.                 ohos:height="match_content"
    98. 
  
  
  
  
  98.                 ohos:padding="10vp"
    99. 
  
  
  
  
  99.                 ohos:margin="10vp"
    100. 
  
  
  
  
  100.                 ohos:text_size="20vp"
    101. 
  
  
  
  
  101.                 ohos:text_color="#FFFFFFFF"
    102. 
  
  
  
  
  102.                 ohos:layout_alignment="center"
    103. 
  
  
  
  
  103.                 ohos:background_element="#FFFF00FF"
    104. 
  
  
  
  
  104.                 ohos:text="垂直與水平方向都居中"/>
    105. 
  
  
  
  
  105.     
    106. 
  
  
  
  
  106.

在上面代碼中我們看到兩個DirectionalLayout子布局中有ohos:weight="1"屬性，這個屬性就是設(shè)置組件在布局中的權(quán)重，按照比例來分配組件占用父組件的大小。

DirectionalLayout布局需要掌握的知識點也就這么多，接下來再說說題外話。

設(shè)置UI顯示界面問題

我們使用XML方式構(gòu)建UI，在AbilitySlice中設(shè)置界面入口的時候，一般會報錯，找不到布局文件。官方推薦使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新編譯一次即可。

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz


網(wǎng)頁標題：鴻蒙HarmonyOSJavaUI之DirectionalLayout布局
瀏覽路徑：http://www.dlmjj.cn/article/cccpjpe.html