harmonyos开发-DependentLayout布局
DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。
属性
alignment
布局对齐方式
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#2edf8f"
ohos:orientation="vertical">
<DependentLayout
ohos:height="match_parent"
ohos:alignment="left"
ohos:width="match_parent">
<Text
ohos:margin="10vp"
ohos:padding="20vp"
ohos:text="LEFT"
ohos:text_alignment="center"
ohos:height="match_content"
ohos:background_element="$graphic:background_radius"
ohos:width="match_content"/>
</DependentLayout>
</DirectionalLayout>
left
表示左对齐。
top
表示顶部对齐。
right
表示右对齐。
bottom
表示底部对齐。
horizontal_center
表示水平居中对齐。
vertical_center
表示垂直居中对齐。
center
表示居中对齐。
组合属性
属性之间可以组合,通过|
来进行分割
比如说
right|center
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#2edf8f"
ohos:orientation="vertical">
<DependentLayout
ohos:height="match_parent"
ohos:alignment="right|center"
ohos:width="match_parent">
<Text
ohos:margin="10vp"
ohos:padding="20vp"
ohos:text="RIGHT|CENTER"
ohos:text_alignment="center"
ohos:height="match_content"
ohos:background_element="$graphic:background_radius"
ohos:width="match_content"/>
</DependentLayout>
</DirectionalLayout>
子组件属性
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#2edf8f"
ohos:orientation="vertical">
<Text
ohos:id="$+id:element"
ohos:height="match_content"
ohos:width="match_content"
ohos:padding="10vp"
ohos:background_element="#FFFFFF"
ohos:text="ELEMENT"
ohos:text_alignment="center"/>
<Text
ohos:height="match_content"
ohos:padding="10vp"
ohos:width="match_content"
ohos:background_element="#FFFFFF"
ohos:text_color="red"
ohos:text_weight="500"
ohos:top_margin="100vp"
ohos:text="LEFT_OF"
ohos:text_alignment="center"/>
</DependentLayout>
left_of
将右边缘与另一个子组件的左边缘对齐
放到相对组件的左边
仅可引用DependentLayout中包含的其他组件的id。
right_of
将左边缘与另一个子组件的右边缘对齐
放到相对组件的右边
start_of
将结束边与另一个子组件的起始边对齐
放到相对组件的前面
end_of
将起始边与另一个子组件的结束边对齐
放到相对组件的后面
above
将下边缘与另一个子组件的上边缘对齐
放到一个组件的上面
below
将上边缘与另一个子组件的下边缘对齐
放到一个组件的下面
align_baseline
将子组件的基线与另一个子组件的基线对齐
align_left
将左边缘与另一个子组件的左边缘对齐
align_top
将上边缘与另一个子组件的上边缘对齐
align_right
将右边缘与另一个子组件的右边缘对齐
多余部分会被裁减掉
align_bottom
将底边与另一个子组件的底边对齐
align_start
将起始边与另一个子组件的起始边对齐
align_end
将结束边与另一个子组件的结束边对齐
align_parent_left
将左边缘与父组件的左边缘对齐
align_parent_top
将上边缘与父组件的上边缘对齐
align_parent_right
将右边缘与父组件的右边缘对齐
align_parent_bottom
将底边与父组件的底边对齐
align_parent_start
将起始边与父组件的起始边对齐
align_parent_end
将结束边与父组件的结束边对齐
center_in_parent
将子组件保持在父组件的中心
horizontal_center
将子组件保持在父组件水平方向的中心
vertical_center
将子组件保持在父组件垂直方向的中心