【HarmonyOS NEXT星河版开发学习】小型测试案例03-QQ音乐登录

@VON

发布于 2025-12-21 11:23:18

1210

前言

本案例使用的还是一些基础的语法，主要是知道如何去布局以及分析，Harmony的布局方式也是特别多，没必要每一个都去死记硬背。要灵活的去运用好各种布局。

知识点概述

在鸿蒙（HarmonyOS）开发中，布局元素是指用来定义界面结构和排版的重要组成部分。在使用ArkUI或其他UI开发框架时，可以利用各种布局元素来构建用户界面，以确保应用在不同设备上的显示效果和交互体验一致。

常见的布局元素和用法：

DirectionalLayout（方向布局）：

DirectionalLayout 是鸿蒙中常用的一种布局元素，支持水平和垂直两种方向的排列。开发者可以通过指定 horizontal 或 vertical 属性来决定其排列方式。

DirectionalLayout {
    orientation: 'vertical', // 或 'horizontal'
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要垂直或水平堆叠子视图的场景，如列表、导航栏等。

StackLayout（层叠布局）：

StackLayout 允许开发者将子视图按照层叠方式放置，类似于CSS中的Flex布局，但不同于DirectionalLayout，子视图可以重叠显示。

StackLayout {
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要灵活控制子视图层次和位置的复杂布局结构。

GridLayout（网格布局）：

GridLayout 允许开发者将子视图放置在网格中，通过行和列的定义来确定每个子视图的位置。可以设置每个格子的大小和对齐方式。

GridLayout {
    columns: 3,
    rows: 2,
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要分割界面成网格状的场景，如图标排列、表格显示等。

FlexLayout（弹性布局）：

FlexLayout 类似于Web开发中的Flexbox布局，支持灵活的子元素排列和对齐方式，能够自适应父容器的大小和变化。

FlexLayout {
    flexDirection: 'row', // 或 'column'
    width: 'match_parent',
    height: 'match_parent',
    justifyContent: 'space-between',
    alignItems: 'center',
    content: [
        // 子元素
    ]
}

这种布局适合于需要动态调整子元素位置和大小的场景，如自适应导航栏、动态列表等。

Component（组件布局）：

除了以上的布局元素，鸿蒙还支持自定义的组件化布局方式，开发者可以根据业务需求自由组合和定制布局结构。

Component {
    id: 'custom_layout',
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种方式可以根据具体业务逻辑创建和管理复杂的自定义布局结构。

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column(){
      Image($r('app.media.tx_02'))
        .width(100)
        .margin(20)
        .borderRadius(100)
      Text('VON')
        .fontWeight(700)
        .margin({
          bottom:20
        })
      Button('QQ登录')
        .width('100%')
        .margin(10)
      Button('微信登录')
        .width('100%')
        .backgroundColor('#ddd')
        .fontColor('#000')
    }
    .width('100%')
    .padding(10)
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

测试