123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 基础篇

简介: 在现代移动应用和平板应用中,侧边栏导航已经成为一种常见且实用的UI设计模式。HarmonyOS NEXT提供了专门的`SideBarContainer`组件来实现这一功能,它能够轻松创建可显示和隐藏的侧边栏布局,非常适合新闻阅读、电子商务、文件管理等应用场景。

[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 基础篇

项目已开源,开源地址: https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial , 欢迎fork & star

效果演示

一、SideBarContainer组件介绍

在现代移动应用和平板应用中,侧边栏导航已经成为一种常见且实用的UI设计模式。HarmonyOS NEXT提供了专门的SideBarContainer组件来实现这一功能,它能够轻松创建可显示和隐藏的侧边栏布局,非常适合新闻阅读、电子商务、文件管理等应用场景。

1.1 SideBarContainer组件概述

SideBarContainer是一个双区域容器组件,通过子组件定义侧边栏和内容区:

  • 第一个子组件表示侧边栏
  • 第二个子组件表示内容区

组件内部已实现侧边栏的显示与隐藏逻辑,开发者只需关注如何传入正确结构和控制显示行为即可。

1.2 SideBarContainer的显示模式

SideBarContainer支持三种显示模式,通过构造函数参数SideBarContainerType指定:

显示模式 说明
Embed 侧边栏嵌入到组件内,和内容区并列显示
Overlay 侧边栏浮在内容区上面
Auto 根据容器宽度自动选择Embed或Overlay模式

1.3 SideBarContainer的主要属性

属性 类型 说明
showSideBar boolean 设置是否显示侧边栏,默认值为true
showControlButton boolean 设置是否显示控制按钮,默认值为true
controlButton ButtonStyle 设置侧边栏控制按钮的属性
sideBarWidth number \ Length 设置侧边栏的宽度,默认值为200vp
minSideBarWidth number \ Length 设置侧边栏最小宽度,默认值为200vp
maxSideBarWidth number \ Length 设置侧边栏最大宽度,默认值为280vp
autoHide boolean 设置当侧边栏拖拽到小于最小宽度后,是否自动隐藏,默认值为true
sideBarPosition SideBarPosition 设置侧边栏显示位置,可选值为Start(左侧)和End(右侧),默认值为Start

1.4 SideBarContainer的主要事件

事件 说明
onChange(callback: (value: boolean) => void) 当侧边栏的状态在显示和隐藏之间切换时触发回调,true表示显示,false表示隐藏

二、新闻阅读应用侧边栏实战

接下来,我们将通过一个新闻阅读应用的实例,详细讲解如何使用SideBarContainer组件实现侧边栏布局。

2.1 需求分析

新闻阅读应用通常需要以下功能:

  • 左侧侧边栏显示新闻分类列表
  • 右侧内容区显示当前分类的新闻列表
  • 侧边栏可以展开和收起
  • 点击分类可以切换新闻内容

2.2 代码实现

首先,我们来看完整的代码实现:

// 新闻阅读应用的侧边栏布局

@Component
export struct NewsApp {
   
    @State isSideBarShow: boolean = true

    build() {
   
        SideBarContainer(SideBarContainerType.Embed) {
   
            // 侧边栏内容 - 新闻分类
            Column() {
   
                Text('新闻分类').fontSize(20).margin(10)
                List({
    space: 10 }) {
   
                    ForEach(['热点', '科技', '财经', '体育', '娱乐', '国际'], (item: string) => {
   
                        ListItem() {
   
                            Text(item).fontSize(16).margin({
    left: 20, top: 10, bottom: 10 })
                        }
                        .onClick(() => {
   
                            console.log(`切换到${
     item}分类`)
                        })
                    })
                }
                .width('100%')
                .layoutWeight(1)
            }
            .width('70%')
            .backgroundColor('#f5f5f5')

            // 主内容区 - 新闻列表
            Column() {
   
                Row() {
   
                    Image($r('app.media.01'))
                        .width(30)
                        .height(30)
                        .onClick(() => {
   
                            this.isSideBarShow = !this.isSideBarShow
                        })
                    Text('今日热点').fontSize(20).margin({
    left: 10 })
                }
                .width('100%')
                .padding(10)

                List({
    space: 10 }) {
   
                    ForEach(['华为发布HarmonyOS NEXT', '全球AI发展峰会召开', '新能源汽车销量创新高'], (item: string) => {
   
                        ListItem() {
   
                            Text(item).fontSize(16).margin(10)
                        }
                        .borderRadius(8)
                        .backgroundColor(Color.White)
                        .shadow({
    radius: 2, color: '#999', offsetX: 1, offsetY: 1 })
                    })
                }
                .width('100%')
                .layoutWeight(1)
            }
        }
        .sideBarPosition(SideBarPosition.Start)
        .controlButton({
    left: 10, top: 50 })
        .onChange((value: boolean) => {
   
            this.isSideBarShow = value
        })
    }
}
AI 代码解读

2.3 代码详解

2.3.1 组件结构

我们使用@Component装饰器定义了一个名为NewsApp的自定义组件,并使用@State装饰器定义了一个状态变量isSideBarShow,用于控制侧边栏的显示和隐藏。

@Component
export struct NewsApp {
   
    @State isSideBarShow: boolean = true
    // ...
}
AI 代码解读

2.3.2 SideBarContainer配置

build方法中,我们使用SideBarContainer组件作为根容器,并设置其显示模式为Embed,即侧边栏嵌入到组件内,和内容区并列显示。

SideBarContainer(SideBarContainerType.Embed) {
   
    // 侧边栏内容
    // 主内容区
}
.sideBarPosition(SideBarPosition.Start)
.controlButton({
    left: 10, top: 50 })
.onChange((value: boolean) => {
   
    this.isSideBarShow = value
})
AI 代码解读

我们通过链式调用设置了以下属性:

  • sideBarPosition(SideBarPosition.Start):设置侧边栏显示在左侧
  • controlButton({ left: 10, top: 50 }):设置控制按钮的位置
  • onChange((value: boolean) => { ... }):监听侧边栏显示状态的变化

2.3.3 侧边栏内容

侧边栏内容是SideBarContainer的第一个子组件,我们使用Column组件作为容器,包含一个标题和一个新闻分类列表。

Column() {
   
    Text('新闻分类').fontSize(20).margin(10)
    List({
    space: 10 }) {
   
        ForEach(['热点', '科技', '财经', '体育', '娱乐', '国际'], (item: string) => {
   
            ListItem() {
   
                Text(item).fontSize(16).margin({
    left: 20, top: 10, bottom: 10 })
            }
            .onClick(() => {
   
                console.log(`切换到${
     item}分类`)
            })
        })
    }
    .width('100%')
    .layoutWeight(1)
}
.width('70%')
.backgroundColor('#f5f5f5')
AI 代码解读

这里我们使用了以下组件和技术:

  • Column:垂直布局容器
  • Text:显示标题文本
  • List:列表容器,设置了项目间距为10
  • ForEach:遍历新闻分类数组,为每个分类创建一个列表项
  • ListItem:列表项容器
  • onClick:为每个列表项添加点击事件处理函数

2.3.4 主内容区

主内容区是SideBarContainer的第二个子组件,我们同样使用Column组件作为容器,包含一个顶部栏和一个新闻列表。

Column() {
   
    Row() {
   
        Image($r('app.media.01'))
            .width(30)
            .height(30)
            .onClick(() => {
   
                this.isSideBarShow = !this.isSideBarShow
            })
        Text('今日热点').fontSize(20).margin({
    left: 10 })
    }
    .width('100%')
    .padding(10)

    List({
    space: 10 }) {
   
        ForEach(['华为发布HarmonyOS NEXT', '全球AI发展峰会召开', '新能源汽车销量创新高'], (item: string) => {
   
            ListItem() {
   
                Text(item).fontSize(16).margin(10)
            }
            .borderRadius(8)
            .backgroundColor(Color.White)
            .shadow({
    radius: 2, color: '#999', offsetX: 1, offsetY: 1 })
        })
    }
    .width('100%')
    .layoutWeight(1)
}
AI 代码解读

这里我们使用了以下组件和技术:

  • Column:垂直布局容器
  • Row:水平布局容器,用于顶部栏
  • Image:显示图标,并添加点击事件用于切换侧边栏的显示状态
  • Text:显示标题文本
  • List:列表容器,设置了项目间距为10
  • ForEach:遍历新闻数组,为每个新闻创建一个列表项
  • ListItem:列表项容器,设置了圆角、背景色和阴影效果

三、布局技巧与最佳实践

3.1 侧边栏宽度设置

在示例中,我们将侧边栏的宽度设置为70%,这是相对于SideBarContainer默认分配给侧边栏的宽度(200vp)的百分比。在实际应用中,可以根据需要调整这个值,或者使用sideBarWidth属性直接设置侧边栏的宽度。

// 方式1:设置侧边栏子组件的宽度
Column() {
   
    // 侧边栏内容
}
.width('70%')

// 方式2:设置SideBarContainer的sideBarWidth属性
SideBarContainer(SideBarContainerType.Embed) {
   
    // 侧边栏内容
    // 主内容区
}
.sideBarWidth(240)
AI 代码解读

3.2 控制按钮定制

SideBarContainer提供了controlButton属性,用于定制控制按钮的位置和外观。在示例中,我们只设置了按钮的位置,但实际上还可以设置按钮的大小和图标。

.controlButton({
   
    left: 10,
    top: 50,
    width: 32,
    height: 32,
    icons: {
   
        shown: $r('app.media.icon_shown'),
        hidden: $r('app.media.icon_hidden'),
        switching: $r('app.media.icon_switching')
    }
})
AI 代码解读

3.3 响应式布局

为了适应不同屏幕尺寸,我们可以结合SideBarContainerType.Auto模式和媒体查询来实现响应式布局。

// 使用Auto模式,根据容器宽度自动选择Embed或Overlay
SideBarContainer(SideBarContainerType.Auto) {
   
    // 侧边栏内容
    // 主内容区
}

// 使用媒体查询调整布局
@Media({
    minWidth: 600 }) {
   
    // 大屏幕布局
}

@Media({
    maxWidth: 599 }) {
   
    // 小屏幕布局
}
AI 代码解读

3.4 状态管理

在示例中,我们使用@State装饰器定义了isSideBarShow状态变量,并通过onChange事件和点击事件来更新这个状态。在实际应用中,可能需要更复杂的状态管理,例如记住用户选择的分类、保存阅读进度等。

@Component
export struct NewsApp {
   
    @State isSideBarShow: boolean = true
    @State currentCategory: string = '热点'
    @State newsItems: Array<NewsItem> = []

    // 加载指定分类的新闻
    loadNews(category: string) {
   
        // 加载新闻数据的逻辑
        this.currentCategory = category
    }

    // ...
}
AI 代码解读

四、总结

本教程详细介绍了如何使用HarmonyOS NEXT的SideBarContainer组件实现新闻阅读应用的侧边栏布局。
SideBarContainer组件为开发者提供了一种简单而强大的方式来实现侧边栏布局,适用于各种应用场景。通过合理使用这个组件,可以创建出用户体验良好的应用界面。
在下一篇教程中,我们将深入探讨如何为新闻阅读应用添加更多交互功能和状态管理,敬请期待!

目录
打赏
0
2
3
0
46
分享
相关文章
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
95 0
鸿蒙Next仓颉语言开发实战教程:店铺详情页
本文介绍了使用仓颉语言开发HarmonyOS应用中的店铺详情页实现方法,重点讲解了List容器的使用技巧,包括如何布局、设置圆角及处理列表项分组等内容,并附有完整代码示例。
|
30天前
|
如何对应用代码进行优化以提高在Docker容器中的性能?
如何对应用代码进行优化以提高在Docker容器中的性能?
160 1
|
30天前
|
如何对迁移到Docker容器中的应用进行性能优化?
如何对迁移到Docker容器中的应用进行性能优化?
181 58
纯血鸿蒙NEXT即时通讯/IM系统:RinbowTalk正式发布,全源码、纯ArkTS编写
RainbowTalk是一套基于MobileIMSDK的产品级鸿蒙NEXT端IM系统,目前已正式发布。纯ArkTS、从零编写,无套壳、没走捷径,每一行代码都够“纯”(详见:《RainbowTalk详细介绍》)。 MobileIMSDK是一整套开源IM即时通讯框架,历经10年,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp、鸿蒙NEXT,服务端基于Netty编写。
108 1
鸿蒙NEXT-鸿蒙三层架构搭建,嵌入HMRouter,实现便捷跳转,新手攻略。(2/3)
本文介绍在三层架构中实现模块依赖的步骤。首先在产品定制层(features)的oh-package.json5文件中导入共享包依赖,如"basic":"file:../../commons/basic"。然后在产品层(products)的配置文件中同时导入公共能力层和产品定制层的依赖,示例展示了如何添加"basic"和"my"两个依赖项。通过这些配置,三层架构的各模块之间建立了完整的依赖关系。
113 0
鸿蒙NEXT-鸿蒙三层架构搭建,嵌入HMRouter,实现便捷跳转,新手攻略。(2/3)
鸿蒙Next仓颉开发语言中的数据类型总结分享
仓颉语言数据类型包括多种数字类型(Int、Float)、字符串(String)、数组(Array、ArrayList、ObservedArrayList)及HashMap。数字类型区分长度和精度,数组支持固定与动态操作,HashMap用于存储键值对。适合开发者快速掌握仓颉基础数据结构。#仓颉 #HarmonyOS
详解鸿蒙Next仓颉开发语言中的全屏模式
仓颉开发语言实现全屏模式教程:默认非全屏,需手动设置沉浸模式以占满屏幕。通过`setWindowLayoutFullScreen`开启全屏,并利用`getWindowAvoidArea`获取摄像头与导航条区域高度,结合AppStorage保存尺寸,适配界面布局,避免内容被遮挡。附屏幕尺寸获取方法及单位说明。
鸿蒙Next仓颉语言开发实战教程:聊天列表
本文分享了 HarmonyOS 仓颉语言实现聊天页面布局的全过程,包括顶部导航栏、动态消息列表及底部输入框的设计与代码实现,详细讲解了上中下结构布局、消息方向区分、阴影设置等内容。
鸿蒙Next仓颉语言开发实战教程:消息列表
本教程分享了使用仓颉语言开发商城应用中的消息列表页面,包含导航栏布局、消息筛选列表及消息内容列表的实现。通过Row、Scroll、List和ForEach等组件,完成页面结构搭建与数据循环渲染,适合初学者实战练习。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等