鸿蒙HarmonyOSJavaUI之DependentLayout布局示例

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

专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联公司为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，网站设计、成都网站建设负责任的成都网站制作公司!

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

https://harmonyos./#zz

 DependentLayout简介

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

常用属性

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

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

 

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

 

示例

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

 

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

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

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

https://harmonyos./#zz

当前标题：鸿蒙HarmonyOSJavaUI之DependentLayout布局示例
网站路径：http://www.shufengxianlan.com/qtweb/news8/24758.html

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

广告

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

猜你还喜欢下面的内容

网站排名知识

行业网站建设

成都h5网站建设　　 　服务器租凭　　 　梓潼网站设计　　 　吉安网站建设　　 　做网站价格　　 　网站建设方案　　 　成都高电机柜租用　　 　和正源建设　　 　四川胜锦安防　　 　成都VI设计　　 　香港虚拟主机空间　　 　小程序开发　　 　app网站建设　　 　彭山网站制作　　 　绵阳科技城电信IDC机房　　 　成都托管服务器　　 　绵阳梓潼网站建设　　 　成都企业网站建设　　 　成都APP定制开发　　 　成都服务器租用