鸿蒙HarmonyOSJavaUI之DirectionalLayout布局

想了解更多内容，请访问：

创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为越城企业提供专业的网站设计、网站建设，越城网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

在之前的章节中我使用的是Java 代码构建UI界面，从本节开始，将使用XML构建UI界面。

使用XML构建UI(默认你已经会在项目中创建XML布局文件)界面相对Java代码构建的好处是：结构清晰，代码简洁。

DirectionalLayout(单一方向排列布局)是Java UI的一种重要的组件布局，用于将一组组件按照水平或垂直方向排布，能够方便地对齐布局内的组件。与Android中的线性布局相似。可以通过设置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布局中的组件不会自动换行，会按照设定的方向依次排列，若超出布局本身大小，超出布局大小的部分将不会显示。我们将上面示例代码中的Text组件宽度设定为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"属性，这个属性就是设置组件在布局中的权重，按照比例来分配组件占用父组件的大小。

DirectionalLayout布局需要掌握的知识点也就这么多，接下来再说说题外话。

设置UI显示界面问题

我们使用XML方式构建UI，在AbilitySlice中设置界面入口的时候，一般会报错，找不到布局文件。官方推荐使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新编译一次即可。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

本文名称：鸿蒙HarmonyOSJavaUI之DirectionalLayout布局
网站路径：http://www.shufengxianlan.com/qtweb/news0/6950.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

分类信息网站

微信小程序公众号开发　　 　成都手机网站建设　　 　顺泽窗帘　　 　温江网站建设　　 　遂宁海缘科技　　 　成都企业网站建设　　 　网站ssl证书　　 　成都企业网站维护　　 　简阳网站制作　　 　做网站　　 　成都企业网站设计　　 　响应式网站建设公司　　 　成都租用服务器　　 　成都网站改版　　 　成都画册设计公司　　 　眉山电信机房　　 　成都网站建设公司　　 　一元广告　　 　网站SEO优化　　 　成都店面装修公司