当前位置: 首页 > 科技观察

HarmonyOSJavaUI的DependentLayout布局示例

时间:2023-03-19 19:38:33 科技观察

更多内容请访问:Harmonyos.51cto.com/#zzDependentLayout简介DependentLayout是指相对位置布局,与DirectionalLayout相比,布局方式更多。每个组件都可以指定相对于同级其他组件的位置,或者相对于父组件的位置。您可以使用DependentLayout布局来实现更复杂的UI界面,也可以将其与其他布局结合,组合出需要的UI界面。通用属性相对于指定组件属性的位置">ohos:id="$+id:text_01"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第一个文本。"ohos:text_size="50"/>ohos:id="$+id:text_02"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第2个Text."ohos:text_size="50"ohos:above="$id:text_01"/>将ohos:above="$id:text_01"改为ohos:below="$id:text_01",效果如下。将ohos:above="$id:text_01"改为ohos:left_of="$id:text_01",效果如下,其他自行验证。xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center">ohos:id="$+id:text_01"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第一个Text."ohos:text_size="50"ohos:align_parent_bottom="true"/>ohos:id="$+id:text_02"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第二个Text。"ohos:text_size="50"ohos:align_parent_top="true"/>ohos:id="$+id:text_03"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第三个Text."ohos:text_size="50"ohos:align_parent_right="true"/>ohos:id="$+id:text_04"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_dependent_layout"ohos:text="我是第四个Text."ohos:text_size="50"ohos:center_in_parent="true"/>示例xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent">ohos:id="$+id:text_01"ohos:height="70vp"ohos:width="match_parent"ohos:background_element="#CCCCCC"ohos:text=“页眉”ohos:text_alignment="center"ohos:text_size="50"ohos:align_parent_top="true"/>ohos:id="$+id:text_02"ohos:height="match_parent"ohos:width="100vp"ohos:background_element="#5C6E71"ohos:text="LEFT"ohos:text_alignment="center"ohos:text_size="50"ohos:align_parent_left="true"ohos:below="$id:text_01"/>ohos:id="$+id:text_03"ohos:height="match_parent"ohos:width="100vp"ohos:background_element="#5C6E71"ohos:text="Right"ohos:text_alignment="center"ohos:text_size="50"ohos:align_parent_right="true"ohos:below="$id:text_01"/>ohos:id="$+id:text_05"ohos:height="match_parent"ohos:width="match_parent"ohos:background_element="#16CCB7"ohos:text_alignment="center"ohos:text="Center"ohos:text_size="50"ohos:right_margin="100vp"ohos:below="$id:text_01"ohos:right_of="$id:text_02"/>ohos:id="$+id:text_04"ohos:height="50vp"ohos:width="match_parent"ohos:background_element="#CCCCCC"ohos:text="页脚"ohos:text_size="50"ohos:align_parent_bottom="true"/>至此,HarmonyOSJavaUI的六大布局我们已经了解并会用到,下一节我们将对六大布局进行总结,并制作上面没有提到的各种属性详细总结,想了解更多请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz