当前位置：主页 > 查看内容

鸿蒙 HarmonyOSJava UI之DependentLayout布局示例

发布时间：2021-09-25 00:00| 有 位朋友查看

简介：想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz DependentLayout简介 DependentLayout意为相对位置布局，与DirectionalLayout相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也……

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

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

https://harmonyos.51cto.com/#zz

 DependentLayout简介

DependentLayout意为相对位置布局，与DirectionalLayout相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也可以指定相对于父组件的位置。可以使用DependentLayout布局来实现更加复杂的UI界面，同时也可以和其他布局相结合组合出需要的UI界面。

常用属性

相对于指定组件的位置属性

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_parent" 
  4.  
  5. ohos:width="match_parent" 
  6.  
  7. ohos:alignment="center"> 
  8.  
  9.  
  10. ohos:id="$+id:text_01" 
  11.  
  12. ohos:height="match_content" 
  13.  
  14. ohos:width="match_content" 
  15.  
  16. ohos:background_element="$graphic:background_dependent_layout" 
  17.  
  18. ohos:text="我是第一个Text." 
  19.  
  20. ohos:text_size="50" 
  21.  
  22. /> 
  23.  
  24.  
  25. ohos:id="$+id:text_02" 
  26.  
  27. ohos:height="match_content" 
  28.  
  29. ohos:width="match_content" 
  30.  
  31. ohos:background_element="$graphic:background_dependent_layout" 
  32.  
  33. ohos:text="我是第二个Text." 
  34.  
  35. ohos:text_size="50" 
  36.  
  37. ohos:above="$id:text_01" 
  38.  
  39. /> 

 

将ohos:above="$id:text_01" 改为ohos:below="$id:text_01"，效果如下。

将ohos:above="$id:text_01" 改为ohos:left_of="$id:text_01"，效果如下，其他自行验证。

子组件相对于父组件的位置属性

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_parent" 
  4.  
  5. ohos:width="match_parent" 
  6.  
  7. ohos:alignment="center"> 
  8.  
  9.  
  10. ohos:id="$+id:text_01" 
  11.  
  12. ohos:height="match_content" 
  13.  
  14. ohos:width="match_content" 
  15.  
  16. ohos:background_element="$graphic:background_dependent_layout" 
  17.  
  18. ohos:text="我是第一个Text." 
  19.  
  20. ohos:text_size="50" 
  21.  
  22. ohos:align_parent_bottom="true" 
  23.  
  24. /> 
  25.  
  26.  
  27. ohos:id="$+id:text_02" 
  28.  
  29. ohos:height="match_content" 
  30.  
  31. ohos:width="match_content" 
  32.  
  33. ohos:background_element="$graphic:background_dependent_layout" 
  34.  
  35. ohos:text="我是第二个Text." 
  36.  
  37. ohos:text_size="50" 
  38.  
  39. ohos:align_parent_top="true" 
  40.  
  41. /> 
  42.  
  43.  
  44. ohos:id="$+id:text_03" 
  45.  
  46. ohos:height="match_content" 
  47.  
  48. ohos:width="match_content" 
  49.  
  50. ohos:background_element="$graphic:background_dependent_layout" 
  51.  
  52. ohos:text="我是第三个Text." 
  53.  
  54. ohos:text_size="50" 
  55.  
  56. ohos:align_parent_right="true" 
  57.  
  58. /> 
  59.  
  60.  
  61. ohos:id="$+id:text_04" 
  62.  
  63. ohos:height="match_content" 
  64.  
  65. ohos:width="match_content" 
  66.  
  67. ohos:background_element="$graphic:background_dependent_layout" 
  68.  
  69. ohos:text="我是第四个Text." 
  70.  
  71. ohos:text_size="50" 
  72.  
  73. ohos:center_in_parent="true" 
  74.  
  75. /> 

 

示例

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_parent" 
  4.  
  5. ohos:width="match_parent"> 
  6.  
  7.  
  8. ohos:id="$+id:text_01" 
  9.  
  10. ohos:height="70vp" 
  11.  
  12. ohos:width="match_parent" 
  13.  
  14. ohos:background_element="#CCCCCC" 
  15.  
  16. ohos:text="Header" 
  17.  
  18. ohos:text_alignment="center" 
  19.  
  20. ohos:text_size="50" 
  21.  
  22. ohos:align_parent_top="true" 
  23.  
  24. /> 
  25.  
  26.  
  27. ohos:id="$+id:text_02" 
  28.  
  29. ohos:height="match_parent" 
  30.  
  31. ohos:width="100vp" 
  32.  
  33. ohos:background_element="#5C6E71" 
  34.  
  35. ohos:text="LEFT" 
  36.  
  37. ohos:text_alignment="center" 
  38.  
  39. ohos:text_size="50" 
  40.  
  41. ohos:align_parent_left="true" 
  42.  
  43. ohos:below="$id:text_01" 
  44.  
  45. /> 
  46.  
  47.  
  48. ohos:id="$+id:text_03" 
  49.  
  50. ohos:height="match_parent" 
  51.  
  52. ohos:width="100vp" 
  53.  
  54. ohos:background_element="#5C6E71" 
  55.  
  56. ohos:text="Right" 
  57.  
  58. ohos:text_alignment="center" 
  59.  
  60. ohos:text_size="50" 
  61.  
  62. ohos:align_parent_right="true" 
  63.  
  64. ohos:below="$id:text_01" 
  65.  
  66. /> 
  67.  
  68.  
  69. ohos:id="$+id:text_05" 
  70.  
  71. ohos:height="match_parent" 
  72.  
  73. ohos:width="match_parent" 
  74.  
  75. ohos:background_element="#16CCB7" 
  76.  
  77. ohos:text_alignment="center" 
  78.  
  79. ohos:text="Center" 
  80.  
  81. ohos:text_size="50" 
  82.  
  83. ohos:right_margin="100vp" 
  84.  
  85. ohos:below="$id:text_01" 
  86.  
  87. ohos:right_of="$id:text_02" 
  88.  
  89. /> 
  90.  
  91.  
  92. ohos:id="$+id:text_04" 
  93.  
  94. ohos:height="50vp" 
  95.  
  96. ohos:width="match_parent" 
  97.  
  98. ohos:background_element="#CCCCCC" 
  99.  
  100. ohos:text="Footer" 
  101.  
  102. ohos:text_size="50" 
  103.  
  104. ohos:align_parent_bottom="true" 
  105.  
  106. /> 

 

至此，我们已经了解并会使用HarmonyOS Java UI的六大布局，下一节我们将对六大布局进行总结，并将前面没有提到的各类属性做详细的归纳。

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

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

https://harmonyos.51cto.com/#zz


本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：让人头痛的大事务问题到底要如何解决？ 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐