deveco studio写用户界面实例

### 使用 Deveco Studio 编写用户界面示例

#### 创建新项目
启动 Deveco Studio 后，选择 "Create New Project" 来初始化一个新的 HarmonyOS 应用程序。在向导中指定应用程序名称、包名以及保存位置。

#### 设计布局文件
HarmonyOS 支持多种 UI 组件来构建用户界面。通常，在 `resources/base/layout` 文件夹下定义 XML 布局文件。下面是一个简单的 HelloWorld 页面布局例子：

<?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_hello_world"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="Hello, World!"
        ohos:text_size="50vp"/>

</DirectionalLayout>

此代码片段展示了如何利用 DirectionalLayout 容器放置一个 Text 控件，并设置其属性如 ID、高度、宽度、显示文字和字体大小[^1]。

#### 配置页面逻辑
对于上述布局对应的页面逻辑处理部分，则是在 Java 或 JavaScript 中实现。这里给出一段基于 AbilitySlice 的简单页面加载逻辑作为参考：

package com.example.helloworld;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafrk.content.Intent;

public class MainAbilitySlice extends AbilitySlice {
    
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        
        // 设置该 Ability Slice 所使用的 layout 资源 id
        this.setUIContent(ResourceTable.Layout_ability_main);

        // 获取并操作界面上的组件实例 (可选)
        ElementName elementName = new ElementName();
        elementName.setElementId(this.getResourceManager().getElementId("$id:text_hello_world"));
        Component component = findComponentById(elementName.getElementId());
        if(component != null && component instanceof Text){
            ((Text)component).setText("Welcome to Harmony OS!");
        }
    }

}

这段代码说明了怎样在一个 Activity 生命周期方法里调用 setUIContent 方法指明要渲染哪个布局资源；同时也示范了获取特定控件对象进而修改其内容的方式[^2]。