DS布局类组件如下：
DirectionalLayout（定向布局，可以理解为AS的线性布局）
用于将一组组件按照水平或者垂直方向排布
<?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:orientation="vertical">
<Text
ohos:id="$+id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="$string:app_name"
ohos:text_color="$color:white"
ohos:text_size="50"/>
<Button
ohos:id="$+id:button"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="center"
ohos:padding="10fp"
ohos:text="$string:button"
ohos:text_color="$color:white"
ohos:text_size="19fp"
ohos:top_margin="10fp"/>
</DirectionalLayout>
ohos:orientation="vertical"是子布局的排列方向，horizontal表示水平方向布局，vertical表示垂直方向布局。
DependentLayout（依赖布局，可以理解为AS的相对布局）
DependentLayout里的每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。
<?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="$graphic:background_ability_my"
ohos:padding="10vp">
<Text
ohos:id="$+id:center_in_parent"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:cyan"
ohos:center_in_parent="true"
ohos:text="center_in_parent"
ohos:text_size="12fp"/>
<Text
ohos:id="$+id:align_parent_left"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_left="true"
ohos:background_element="$color:cyan"
ohos:center_in_parent="true"
ohos:text="align_parent_left"
ohos:text_size="12fp"/>
<Text
ohos:id="$+id:center_in_parent_above"
ohos:height="match_content"
ohos:width="match_content"
ohos:above="$id:center_in_parent"
ohos:background_element="$color:cyan"
ohos:bottom_margin="20vp"
ohos:center_in_parent="true"
ohos:text="center_in_parent_above"
ohos:text_size="12fp"/>
<Text
ohos:id="$+id:center_in_parent_below"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:cyan"
ohos:below="$id:center_in_parent"
ohos:center_in_parent="true"
ohos:text="center_in_parent_below"
ohos:text_size="12fp"
ohos:top_margin="20vp"/>
<Text
ohos:id="$+id:align_parent_right_bottom"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_bottom="true"
ohos:align_parent_right="true"
ohos:background_element="$color:cyan"
ohos:text="align_parent_right_bottom"
ohos:text_size="12fp"/>
<Text
ohos:id="$+id:text"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_bottom="true"
ohos:background_element="$color:cyan"
ohos:end_margin="20vp"
ohos:start_of="$id:align_parent_right_bottom"
ohos:text="text"
ohos:text_size="12fp"/>
</DependentLayout>
ohos:center_in_parent="true"表示将子组件保持在父组件的中心。
ohos:align_parent_left="true"表示将左边缘与父组件的左边缘对齐。
ohos:above="$id:center_in_parent"表示将下边缘与另一个子组件的上边缘对齐。
ohos:below="$id:center_in_parent"表示将上边缘与另一个子组件的下边缘对齐。
ohos:align_parent_bottom="true"表示将底边与父组件的底边对齐。
ohos:align_parent_right="true"表示将右边缘与父组件的右边缘对齐。
ohos:start_of="$id:align_parent_right_bottom"表示将结束边与另一个子组件的起始边对齐。
相对于同级组件的位置布局
| 位置布局 | 描述 |
|---|---|
| above | 处于同级组件的上侧 |
| below | 处于同级组件的下侧 |
| start_of | 处于同级组件的起始侧 |
| end_of | 处于同级组件的结束侧 |
| left_of | 处于同级组件的左侧 |
| right_of | 处于同级组件的右侧 |
相对于父组件的位置布局
| 位置布局 | 描述 |
|---|---|
| center_in_parent | 处于父组件的中间 |
| align_parent_left | 处于父组件的左侧 |
| align_parent_right | 处于父组件的右侧 |
| align_parent_start | 处于父组件的起始侧 |
| align_parent_end | 处于父组件的结束侧 |
| align_parent_top | 处于父组件的上侧 |
| align_parent_bottom | 处于父组件的下侧 |
PositionLayout（位置布局）
ability_position_layout_test.xml
<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$color:cyan">
<Text
ohos:id="$+id:white"
ohos:height="50vp"
ohos:width="50vp"
ohos:background_element="$color:white"/>
</PositionLayout>
PositionLayoutTestSlice.java
public class PositionLayoutTestSlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_position_layout_test);
Text text= (Text) findComponentById(ResourceTable.Id_white);
text.setContentPosition(150,150);
}
}
TableLayout（表格布局）
设置内部组件按表格方式排列
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:column_count="2"
ohos:row_count="3">
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="1"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="2"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="3"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="4"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="5"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="6"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$media:ic_animal"
ohos:margin="8vp"
ohos:text="7"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
</TableLayout>
ohos:column_count="2"设置列数
ohos:row_count="3"设置行数
StackLayout（堆叠布局）
StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
<?xml version="1.0" encoding="utf-8"?>
<StackLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent">
<Text
ohos:height="300vp"
ohos:width="300vp"
ohos:background_element="#3F56EA"
ohos:text="Layer 1"
ohos:text_alignment="bottom|horizontal_center"
ohos:text_size="24fp"/>
<Text
ohos:id="$+id:text_light_purple"
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#00AAEE"
ohos:text="Layer 2"
ohos:text_alignment="bottom|horizontal_center"
ohos:text_size="24fp"/>
<Text
ohos:height="90vp"
ohos:width="90vp"
ohos:background_element="#00BFC9"
ohos:layout_alignment="bottom|right"
ohos:text="Layer 3"
ohos:text_alignment="center"
ohos:text_size="24fp"/>
</StackLayout>
StackLayout中组件的布局默认在区域的左上角，并且以后创建的组件会在上层。
使用layout_alignment属性可以指定组件在StackLayout中的相对位置，ohos:layout_alignment="bottom|right"表示该控件位于StackLayout布局的右下方。
| layout_alignment属性取值 | 描述 |
|---|---|
| left | 表示左对齐 |
| top | 表示顶部对齐 |
| right | 表示右对齐 |
| bottom | 表示底部对齐 |
| center | 表示居中对齐 |
| horizontal_center | 表示水平居中对齐 |
| vertical_center | 表示垂直居中对齐 |
| 可以设置取值项如表中所列，也可以使用“ | ”进行多项组合。 |
DS显示类组件如下：
先预览一下要学习的控件吧
Text（用于文本显示）
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="我是Text"
ohos:text_size="16fp"
ohos:text_color="#000000"/>
当然还可以设置文本最大行数、长文本截断方式、文本输入类型等等属性。
详见官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-text-0000001050729534
Image（用于图像显示）
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:top_margin="10vp"
ohos:image_src="$media:ic_animal"
ohos:alpha="0.5"/>
官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-image-0000001058976860
DS还有交互类的组件：
TextField（文本输入框）
<TextField
ohos:height="40vp"
ohos:width="150vp"
ohos:top_margin="10vp"
ohos:padding="5vp"
ohos:text_color="$color:cyan"
ohos:hint="请在此输入..."
ohos:text_size="15fp"
ohos:text_alignment="vertical_center"
ohos:hint_color="$color:white"
ohos:background_element="#999999"/>
官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-textfield-0000001061125582
Button（按钮，提供了点击响应功能）
<Button
ohos:id="$+id:button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="20fp"
ohos:text="我是Button"
ohos:background_element="$color:cyan"
ohos:top_margin="10vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"/>
java代码操纵button
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);// 加载XML布局
// 实例化button
Button button = (Button) findComponentById(ResourceTable.Id_button);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
// 此处添加点击按钮后的事件处理逻辑
// 点击按钮弹出吐司
new ToastDialog(getContext())
.setText("我是Button！")
.show();
}
});
}
}
附：本文完整项目代码可以去本人的资源中下载~
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
