harmonyos开发-DirectionalLayout
DirectionalLayout是Java UI中的一种重要组件布局,用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。该布局和其他布局的组合,可以实现更加丰富的布局方式。
属性
alignment
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:padding="20vp"
ohos:alignment="end"
ohos:width="match_parent"
ohos:background_element="#9013fe"
ohos:orientation="horizontal">
<Text
ohos:height="match_content"
ohos:background_element="$graphic:background_radius"
ohos:padding="20vp"
ohos:text_size="25fp"
ohos:text="END"
ohos:width="match_content"/>
</DirectionalLayout>
left
表示左对齐。
top
表示顶部对齐。
right
表示右对齐。
bottom
表示底部对齐。
horizontal_center
表示水平居中对齐。
vertical_center
表示垂直居中对齐。
center
表示居中对齐。
start
表示靠起始端对齐。
end
表示靠结束端对齐。
组合使用
属性之间是可以组合使用的,通过| 分割
top|center
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:padding="20vp"
ohos:alignment="top|center"
ohos:width="match_parent"
ohos:background_element="#9013fe"
ohos:orientation="horizontal">
<Text
ohos:height="match_content"
ohos:background_element="$graphic:background_radius"
ohos:padding="20vp"
ohos:text_size="25fp"
ohos:text="TOP|CENTER"
ohos:width="match_content"/>
</DirectionalLayout>
right|bottom
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:padding="20vp"
ohos:alignment="right|bottom"
ohos:width="match_parent"
ohos:background_element="#9013fe"
ohos:orientation="horizontal">
<Text
ohos:height="match_content"
ohos:background_element="$graphic:background_radius"
ohos:padding="20vp"
ohos:text_size="25fp"
ohos:text="RIGHT|BOTTOM"
ohos:width="match_content"/>
</DirectionalLayout>
orientation
子布局排列方向
horizontal
表示水平方向布局。
<?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="#9013fe"
ohos:orientation="horizontal"
ohos:padding="20vp">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:padding="5vp"
ohos:margin="5vp"
ohos:text="Component"
ohos:text_alignment="center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:margin="5vp"
ohos:background_element="$graphic:background_radius"
ohos:padding="5vp"
ohos:text="Component"
ohos:text_alignment="center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:margin="5vp"
ohos:background_element="$graphic:background_radius"
ohos:padding="5vp"
ohos:text="Component"
ohos:text_alignment="center"/>
</DirectionalLayout>
vertical
表示垂直方向布局。
<?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="#9013fe"
ohos:orientation="vertical"
ohos:padding="20vp">
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:background_radius"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text="Component"
ohos:text_alignment="center"/>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="10vp"
ohos:background_element="$graphic:background_radius"
ohos:padding="10vp"
ohos:text="Component"
ohos:text_alignment="center"/>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="10vp"
ohos:background_element="$graphic:background_radius"
ohos:padding="10vp"
ohos:text="Component"
ohos:text_alignment="center"/>
</DirectionalLayout>
total_weight
所有子视图的权重之和
可以直接设置浮点数值,也可以引用float浮点数资源。
通过这个可以实现自适应按比例布局
这里总权重为7,然后我们给子组件分配权重则会自动设定尺寸
如果每个权重均为1则尺寸一致
<?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="#9013fe"
ohos:orientation="vertical"
ohos:padding="20vp">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:total_weight="7">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--2--"
ohos:text_alignment="center"
ohos:weight="2"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--3--"
ohos:text_alignment="center"
ohos:weight="3"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--2--"
ohos:text_alignment="center"
ohos:weight="2"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:total_weight="7">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--1--"
ohos:text_alignment="center"
ohos:weight="1"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--4--"
ohos:text_alignment="center"
ohos:weight="4"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--2--"
ohos:text_alignment="center"
ohos:weight="2"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:total_weight="3">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--1--"
ohos:text_alignment="center"
ohos:weight="1"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--1--"
ohos:text_alignment="center"
ohos:weight="1"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_radius"
ohos:margin="5vp"
ohos:padding="5vp"
ohos:text="--1--"
ohos:text_alignment="center"
ohos:weight="1"/>
</DirectionalLayout>
</DirectionalLayout>
layout_alignment
内部组件对其方式,使用方法和 alignment一致,这里不做详细概述。