3.2 页面布局（XML 与 JavaScript/ETS 代码布局）

鸿蒙应用开发支持两种主要的页面布局方式：基于 XML 的声明式布局和基于 JavaScript/ETS (eXtensible TypeScript) 的代码式布局。开发者可以根据项目需求选择合适的布局方式。

3.2.1 XML 布局

1. 概念

XML 布局是一种声明式的页面设计方式，通过配置 XML 文件来定义用户界面结构。
鸿蒙的 XML 布局类似于 Android 的 XML 布局，但更简洁高效。

2. XML 布局文件的位置

XML 文件通常存放在项目的以下目录中：

  • 路径：entry/src/main/resources/base/layout/
  • 命名约定：以 .xml 为扩展名，例如 ability_main.xml。

3. 示例

以下是一个简单的 XML 布局文件，定义了一个包含文本和按钮的界面：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:orientation="vertical"
    ohos:width="match_parent"
    ohos:height="match_parent">
    
    <Text
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="欢迎使用鸿蒙应用"
        ohos:layout_alignment="center" />
    
    <Button
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="点击我"
        ohos:margin="20vp" />
</DirectionalLayout>

4. 特点

  • 直观性：通过 XML 文件，开发者可以清晰定义界面结构。
  • 分离逻辑与视图：便于团队协作，UI 设计与业务逻辑分离。
  • 静态布局：适合界面布局相对固定的场景。

3.2.2 JavaScript/ETS 代码布局

鸿蒙系统支持使用 JavaScript 或 ETS（eXtensible TypeScript）语言进行动态布局设计。这种布局方式允许开发者通过代码实现界面生成和更新，适合动态需求较高的场景。

示例

以下是一个简单的 JavaScript/ETS 代码布局示例，定义了一个包含文本和按钮的界面：

export default {
    build() {
        return (
            <stack direction="vertical" width="100%" height="100%">
                <text
                    value="欢迎使用鸿蒙应用"
                    width="match_content"
                    height="match_content"
                    alignment="center"
                    fontSize="24px"
                />
                <button
                    value="点击我"
                    width="match_content"
                    height="match_content"
                    margin="20vp"
                    onClick={() => {
                        console.log('按钮被点击！');
                    }}
                />
            </stack>
        );
    }
};

3. 特点

  • 动态性：可以根据数据和逻辑动态生成界面。
  • 灵活性：适合复杂界面或需要实时更新的场景。
  • 语言一致性：开发者可以使用同一种语言（JavaScript/ETS）编写布局和逻辑。

3.2.3 XML 与 JavaScript/ETS 布局的对比

以下是 XML 布局和 JavaScript/ETS 布局的详细对比：

特性XML 布局JavaScript/ETS 布局
开发风格声明式命令式
动态支持静态布局动态生成界面
可读性可读性高，适合简单的页面结构代码灵活，但阅读成本较高
文件分离视图与逻辑分离，适合团队协作视图与逻辑合并
实现复杂性适合固定布局，易于快速实现适合复杂交互和实时更新的场景
开发效率需要在 XML 文件与逻辑代码间切换使用同一种语言编写布局与逻辑
适用场景简单、固定的 UI 界面动态生成界面或复杂逻辑驱动的界面

3.2.4 推荐使用场景

  1. XML 布局：

    • 适合界面结构稳定且逻辑较少的场景。
    • 更适合需要团队分工，UI 和逻辑明确分离的项目。

  2. JavaScript/ETS 布局：

    • 动态更新频繁或界面复杂时的优先选择。
    • 适合追求高灵活性和一致性语言环境的开发团队。

小结

XML 和 JavaScript/ETS 提供了灵活多样的布局方式：

  • XML 布局 更适合静态页面开发，具有良好的可读性和分离性。
  • JavaScript/ETS 布局 动态性更强，适合需要实时更新和复杂逻辑的场景。

开发者可根据项目需求和团队习惯，选择合适的布局方式或结合两者进行开发。

Last Updated::