（三）HarmonyOS Design 的 UI 框架支持原创

小_铁51CTO

发布于 2025-3-11 22:07

浏览

0收藏

HarmonyOS Design 的 UI 框架支持

在 HarmonyOS 生态中，HarmonyOS Design 为开发者打造优质应用界面提供了坚实基础，而其对多种 UI 框架的支持，更是极大地便利了开发者的工作流程，助力他们高效实现创意。

一、支持的 UI 框架

（一）ArkUI

ArkUI 是 HarmonyOS 应用开发中极为重要的 UI 框架。它基于 JavaScript 语言，采用声明式编程范式，让开发者能够以简洁、直观的方式描述用户界面。ArkUI 具备强大的跨设备适配能力，无论是手机、平板、智能穿戴设备还是智慧屏，都能轻松实现界面的自适应布局。例如，在不同尺寸屏幕的设备上，ArkUI 可以根据屏幕的宽高比自动调整组件的大小和位置，确保用户体验的一致性。同时，ArkUI 提供了丰富的内置组件，涵盖按钮、文本框、列表、导航栏等常见元素，开发者可以直接调用这些组件构建复杂的用户界面，减少了大量重复开发工作。

（二）XML - based UI

HarmonyOS 也支持基于 XML 的传统 UI 框架。这种框架对于熟悉 Android 开发的开发者来说较为亲切，易于上手。通过在 XML 文件中定义布局结构和组件属性，开发者可以精确控制界面的呈现方式。例如，在定义一个简单的线性布局时，代码如下：

<LinearLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:layout_width="match_parent"
ohos:layout_height="match_parent"
ohos:orientation="vertical">
<Button
ohos:id="@+id/button"
ohos:layout_width="wrap_content"
ohos:layout_height="wrap_content"
ohos:text="点击按钮"/>
</LinearLayout>

在这个例子中，通过<LinearLayout>标签定义了一个垂直方向的线性布局，内部包含一个按钮组件。开发者可以根据 HarmonyOS Design 规范，在 XML 文件中灵活设置组件的样式、尺寸等属性，构建符合设计要求的界面。

二、UI 框架的使用方法

（一）ArkUI 的使用方法

项目创建与初始化：

首先，开发者需要安装 HarmonyOS 应用开发工具 DevEco Studio。在 DevEco Studio 中创建一个新的 HarmonyOS 应用项目，选择基于 ArkUI 的项目模板。项目创建完成后，进入项目目录，在src/main/js/default/pages目录下可以看到默认生成的页面文件，如index.hml（用于定义页面结构）、index.css（用于定义页面样式）和index.js（用于定义页面逻辑）。

布局设置：

在index.hml文件中，使用 ArkUI 的布局组件来构建页面布局。例如，使用Flex布局实现一个水平排列的按钮组：

<div class="container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>
</div>

在index.css文件中，为上述布局和按钮设置样式：

.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
}
.button {
width: 100px;
height: 40px;
background-color: #007DFF;
color: white;
font-size: 16px;
border-radius: 5px;
}

通过上述代码，利用Flex布局的特性，实现了按钮在容器中水平均匀分布，并且设置了按钮的样式，符合 HarmonyOS Design 的视觉规范。

3. 组件添加与交互逻辑实现：

在index.js文件中，可以为按钮添加点击事件等交互逻辑。例如：

export default {
data: {
// 可以定义数据变量
},
onInit() {
// 页面初始化时执行的逻辑
},
handleButtonClick() {
console.log('按钮被点击了');
// 可以在这里添加更复杂的业务逻辑，如发起网络请求、页面跳转等
}
}

然后在index.hml文件中，将按钮的点击事件绑定到handleButtonClick方法：

<button class="button" @click="handleButtonClick">按钮1</button>

这样，当用户点击按钮时，就会触发相应的逻辑，实现与用户的交互。

（二）XML - based UI 的使用方法

布局文件创建与编辑：

在src/main/resources/base/layout目录下创建或编辑 XML 布局文件。如创建一个名为main_layout.xml的文件，定义一个包含图片和文本的界面：

<LinearLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:layout_width="match_parent"
ohos:layout_height="match_parent"
ohos:orientation="vertical"
ohos:padding="16dp"
ohos:background_color="#F5F5F5">
<Image
ohos:id="@+id/image_view"
ohos:layout_width="100dp"
ohos:layout_height="100dp"
ohos:src="$media:icon"
ohos:layout_gravity="center_horizontal"/>
<TextView
ohos:id="@+id/text_view"
ohos:layout_width="wrap_content"
ohos:layout_height="wrap_content"
ohos:text="这是一段示例文本"
ohos:text_size="18sp"
ohos:text_color="#333333"
ohos:layout_margin_top="16dp"
ohos:layout_gravity="center_horizontal"/>
</LinearLayout>

在这个布局中，通过<LinearLayout>设置了整体的垂直布局，<Image>组件用于显示图片，<TextView>组件用于显示文本，并且按照 HarmonyOS Design 规范设置了组件的各种属性，如尺寸、颜色、边距等。

2. 在 Java 代码中关联布局与逻辑：

在对应的 Java 代码文件（如MainAbilitySlice.java）中，通过setUIContent方法关联布局文件：

public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_main_layout);
// 可以在这里获取布局中的组件并添加交互逻辑
Image imageView = (Image) findComponentById(ResourceTable.Id_image_view);
TextView textView = (TextView) findComponentById(ResourceTable.Id_text_view);
// 例如为图片添加点击事件
imageView.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
textView.setText("图片被点击了");
}
});
}
}