（三）HarmonyOS Design 的 UI 框架支持

最新推荐文章于 2025-06-24 21:15:40 发布

小_铁

最新推荐文章于 2025-06-24 21:15:40 发布

阅读量992

点赞数 23

CC 4.0 BY-SA版权

分类专栏： Harmony OS Next 文章标签： Harmony OS Next 华为 harmonyos

本文链接：https://blog.youkuaiyun.com/m0_71441912/article/details/146165239

Harmony OS Next 专栏收录该内容

421 篇文章

订阅专栏

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("图片被点击了");

}

});

}

}