#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：深入理解基础组件原创

SoraLuna

发布于 2024-8-9 19:07

浏览

1收藏

玩转 HarmonyOS UI 设计：深入理解基础组件

在基础组件入门中，我们学习了按钮、文本输入框和文本显示框的基本使用方法。接下来，我们将进一步探索其他重要的 UI 组件，如图像 (Image) 和布局容器 (Container)，并了解如何通过它们构建更复杂的用户界面。

一、图像组件 (Image)

图像是用户界面中不可或缺的一部分，HarmonyOS 提供了强大的 Image 组件来展示本地或远程的图像资源。

图像组件的属性
- Image 组件提供了多种属性，如 objectFit、objectRepeat、alt 等，允许开发者自定义图像的显示方式、适应模式和替代文本。

显示本地图像

你可以通过以下代码将存储在本地的图像资源显示在界面中：

@Component
export struct ImageDemo {
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width('50%')
        .height('100%')
      Image($rawfile('startIcon.png'))
        .width('50%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：深入理解基础组件-鸿蒙开发者社区

加载远程图像

如果需要显示来自网络的图像，可以通过以下方式实现：

@Component
export struct ImageDemo {
  build() {
    Column() {
      Image('https://example.com/image.png')
        .width('80%')
        .height('30%')
    }
    .width('100%')
    .height('100%')
  }
}

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：深入理解基础组件-鸿蒙开发者社区

别忘了在 module.json5 文件中添加网络权限以允许从远程加载图像。

二、布局容器 (Container) 和布局管理

布局容器是组织和管理 UI 组件的重要工具。HarmonyOS 提供了多种布局容器，如 Column、Row、Grid 等，帮助你灵活地排列和展示组件。

布局容器的属性
- 每种布局容器都具有特定的属性和行为。例如，Column 容器会将子组件垂直排列，而 Row 容器会将子组件水平排列。

使用 Column 和 Row 容器

通过结合使用 Column 和 Row 容器，你可以构建出复杂的布局结构：

@Component
export struct LayoutDemo {
  build() {
    Column() {
      Row() {
        Text('Item 1')
          .weight(1)
        Text('Item 2')
          .weight(1)
      }
      Row() {
        Text('Item 3')
          .weight(1)
        Text('Item 4')
          .weight(1)
      }
    }
    .width('100%')
    .height('100%')
  }
}

使用 Grid 容器

Grid 容器提供了更加灵活的布局方式，适用于需要精确控制组件位置的场景：

@Component
export struct GridDemo {
  build() {
    Grid(columns: 2) {
      Text('Grid Item 1')
      Text('Grid Item 2')
      Text('Grid Item 3')
      Text('Grid Item 4')
    }
    .width('100%')
    .height('100%')
  }
}

三、处理复杂的用户交互

除了基本的点击和输入事件，HarmonyOS 还支持更复杂的用户交互，例如手势识别、多点触控等。

实现手势识别

通过为组件添加手势识别功能，你可以让应用程序响应用户的拖动、缩放等操作：

@Component
export struct GestureDemo {
  build() {
    Image($r('app.media.image'))
      .onSwipe(() => {
        // 处理滑动手势
      })
      .onPinch((scale) => {
        // 处理捏合手势
      })
  }
}