HarmonyOS NEXT 小说阅读器应用系列教程之---布局基础讲解

项目源码地址

项目源码已发布到GitCode平台, 方便开发者进行下载和使用。

https://gitcode.com/qq_33681891/NovelReader

效果演示

前言

在本教程中，我们将深入探讨HarmonyOS应用开发中的UI布局基础知识，通过小说阅读器应用的首页实现来学习HarmonyOS的布局系统。我们将详细讲解如何使用各种容器组件和基础组件来构建一个美观且功能完善的用户界面。

1. HarmonyOS布局系统概述

在HarmonyOS中，UI布局主要基于ArkUI框架，它提供了声明式的UI开发范式。在我们的小说阅读器应用中，主要使用了以下几种布局容器：

• Column：垂直方向的线性布局容器
• Row：水平方向的线性布局容器
• Stack：层叠布局容器
• List：列表容器，支持水平和垂直方向的滚动列表
• Scroll：可滚动容器

2. 页面结构组织

在我们的小说阅读器应用中，首页的整体结构是通过嵌套的容器组件构建的。以下是主要的页面结构：

build() {
    Column() {
        // 顶部搜索栏
        Row() { ... }
        
        // 公告区域
        Row() { ... }
        
        // 分类导航栏
        Row() { ... }
        
        // 小说分类列表
        Scroll() { ... }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
}

这种结构清晰地将页面分为几个主要部分，每个部分负责特定的功能区域。

3. 容器组件详解

3.1 Column组件

Column组件用于垂直排列子组件。在我们的应用中，整个页面的主体就是一个Column容器：

Column() {
    // 子组件
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')

通过链式调用设置属性，我们可以控制Column的宽度、高度和背景色等样式。

3.2 Row组件

Row组件用于水平排列子组件。例如，我们的搜索栏就是使用Row实现的：

Row() {
    Row() {
        Image($r('app.media.flippage_discover'))
            .width(24)
            .height(24)
            .margin({ left: 10, right: 5 })

        TextInput({ placeholder: '搜索' })
            .width('90%')
            .height(40)
            .backgroundColor('#F5F5F5')
            .placeholderColor('#999999')
            .placeholderFont({ size: 16 })
    }
    .width('100%')
    .height(40)
    .backgroundColor('#F5F5F5')
    .borderRadius(20)
}
.width('90%')
.padding({ top: 10, bottom: 10 })

这里我们使用了嵌套的Row来实现搜索图标和输入框的水平排列。

3.3 Stack组件

Stack组件用于层叠布局，子组件会按照添加顺序从下到上叠加显示。在我们的应用中，小说封面和评分标签就是使用Stack实现的：

Stack() {
    Image(item.cover)
        .width(120)
        .height(160)
        .borderRadius(8)

    // 评分标签
    Text(`${item.score}分`)
        .fontSize(14)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#FF6B81')
        .borderRadius(10)
        .padding({
            left: 8,
            right: 8,
            top: 2,
            bottom: 2
        })
        .position({ x: '70%', y: 10 })
}
.width(120)
.height(160)

通过position属性，我们可以精确控制评分标签在封面上的位置。

4. 基础组件使用

4.1 Image组件

Image组件用于显示图片，支持本地资源和网络图片：

Image($r('app.media.flippage_discover'))
    .width(24)
    .height(24)
    .margin({ left: 10, right: 5 })

$r('app.media.flippage_discover')是引用本地资源的方式，而我们的小说封面则使用了网络图片URL。

4.2 Text组件

Text组件用于显示文本内容：

Text(item.title)
    .fontSize(16)
    .fontWeight(FontWeight.Bold)
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .width(120)
    .margin({ top: 5 })

通过设置maxLines和textOverflow属性，我们可以控制文本的显示行数和溢出处理方式。

4.3 TextInput组件

TextInput组件用于接收用户输入：

TextInput({ placeholder: '搜索' })
    .width('90%')
    .height(40)
    .backgroundColor('#F5F5F5')
    .placeholderColor('#999999')
    .placeholderFont({ size: 16 })

通过设置placeholder相关属性，我们可以自定义提示文本的样式。

5. 样式与布局属性

HarmonyOS提供了丰富的样式和布局属性，用于控制组件的外观和位置：

5.1 尺寸与边距

.width('90%')  // 宽度设置为父容器的90%
.height(40)    // 高度设置为40像素
.margin({ top: 10, bottom: 10 })  // 上下外边距为10像素
.padding({ left: 10, right: 10 }) // 左右内边距为10像素

5.2 对齐与排列

.alignItems(HorizontalAlign.Center)  // 水平居中对齐
.justifyContent(FlexAlign.Center)    // 主轴方向居中对齐

5.3 外观样式

.backgroundColor('#F5F5F5')  // 背景色
.borderRadius(8)             // 圆角半径
.border({ width: 1, color: '#D2B48C', style: BorderStyle.Solid })  // 边框样式

6. 响应式布局技巧

在HarmonyOS中，我们可以使用百分比和flex布局来实现响应式UI：

// 使用百分比适应不同屏幕宽度
.width('90%')

// 使用layoutWeight属性实现弹性布局
.layoutWeight(1)

在我们的应用中，小说列表区域使用了layoutWeight(1)，这样它会自动填充剩余空间。

总结

通过本教程，我们学习了HarmonyOS UI布局的基础知识，包括各种容器组件的使用、基础组件的属性设置以及样式与布局技巧。这些知识将帮助你构建出美观且功能完善的HarmonyOS应用界面。