玩转HarmonyOS NEXT之IM应用首页布局

本文从目前流行的垂类市场中,选择即时通讯应用作为典型案例详细介绍HarmonyOS NEXT的各类布局在实际开发中的综合应用。即时通讯应用的核心功能为用户交互,主要包含对话聊天、通讯录,社交圈等交互功能。

应用首页

创建一个包含一列的栅格布局,显示文本“首页”,并且监听断点变化,当断点发生变化时更新 currentBreakpoint状态。

  • 示例代码
    @Entry
    @Component
    struct Index {@StorageLink('currentBreakpoint') currentBreakpoint: string = 'sm';build() {GridRow({ columns: 1 }) {GridCol({ span: 1 } ) {Column() {Text('首页')}.width('100%').height('100%')}}.onBreakpointChange((breakPoint => {this.currentBreakpoint = breakPoint;}))}
    }
    
    在这里插入图片描述

装饰器

  • @Entry:标记这是一个页面入口
  • @Component:标记这是一个组件

状态管理

  • @StorageLink:全局UI状态存储。
  • currentBreakpoint:声明并初始化了一个字符串类型的状态变量,初始值为 ‘sm’,这可能表示屏幕宽度的断点。

布局和结构

  • GridRowGridCol:表示一个栅格布局,GridRow 包含一行,GridCol 表示该行中的一列。
  • columns: 1span: 1:指定网格布局中的列数和列的跨度。

断点变化处理

  • .onBreakpointChange:绑定一个事件处理函数,当断点变化时触发。
  • (breakPoint => { this.currentBreakpoint = breakPoint; }):定义了一个箭头函数,将新的断点值赋给 currentBreakpoint

HomeTab组件

BottomNavigation构造器

BottomNavigation构建器函数用于创建一个带有图像和文本的底部导航按钮,具有自适应布局和状态变化的功能。通过点击按钮,可以更新当前页面索引,从而改变按钮的显示状态(例如图像和文本的颜色)。

  • 示例代码
interface BottomNavigationProps {index: number;img: Resource;selectImg?: Resource;title: Resource | string;
}@BuilderBottomNavigation(button: BottomNavigationProps) {Column() {Image(this.currentPageIndex === button.index ? button.selectImg : button.img).objectFit(ImageFit.Contain).width(this.currentBreakpoint === 'lg' ? '24vp' : '22vp').height(this.currentBreakpoint === 'lg' ? '24vp' : '22vp')Text(button.title).fontColor(this.currentPageIndex === button.index ? '#0A59F7' : Color.Black).opacity(this.currentPageIndex === button.index ? 1 : 0.6).fontWeight(500).textAlign(TextAlign.Center).fontSize('10fp').lineHeight('14vp').fontFamily('HarmonyHeiTi-Bold').margin({ top: '4vp' })}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).onClick(() => {this.currentPageIndex = button.index;})}
}

参数类型约束

interface BottomNavigationProps {index: number;img: Resource;selectImg?: Resource;title: Resource | string;
}
  • index:按钮的索引,用于标识按钮。
  • img:按钮的默认图像资源。
  • selectImg:按钮的选中状态图像资源(可选)。
  • title:按钮的标题,可以是资源或字符串。

构造器函数

@Builder
BottomNavigation(button: BottomNavigationProps) {
  • @Builder:表示这是一个构建器函数,用于构建UI组件。
  • BottomNavigation(button: BottomNavigationProps):定义了接收一个 BottomNavigationProps 类型的参数 button。

组件布局

Column() {Image(this.currentPageIndex === button.index ? button.selectImg : button.img).objectFit(ImageFit.Contain).width(this.currentBreakpoint === 'lg' ? '24vp' : '22vp').height(this.currentBreakpoint === 'lg' ? '24vp' : '22vp')
  • Column():创建一个列布局,用于垂直排列组件。
  • Image(...):根据当前页面索引和按钮索引是否匹配来选择显示按钮的图像或选中状态的图像。
  • objectFit(ImageFit.Contain):设置图像的适应方式为“Contain”。
  • .width(...) 和 .height(...):根据断点调整图像的宽度和高度。

文本设置

Text(button.title).fontColor(this.currentPageIndex === button.index ? '#0A59F7' : Color.Black).opacity(this.currentPageIndex === button.index ? 1 : 0.6).fontWeight(500).textAlign(TextAlign.Center).fontSize('10fp').lineHeight('14vp').fontFamily('HarmonyHeiTi-Bold').margin({ top: '4vp' })
  • Text(button.title):显示按钮的标题。
  • .fontColor(...):根据按钮是否被选中设置字体颜色。
  • .opacity(...):根据按钮是否被选中设置透明度。
  • .fontWeight(500):设置字体粗细。
  • .textAlign(TextAlign.Center):设置文本对齐方式为居中。
  • .fontSize('10fp') 和 .lineHeight('14vp'):设置字体大小和行高。
  • .fontFamily('HarmonyHeiTi-Bold'):设置字体样式。
  • margin({ top: '4vp' }):设置顶部外边距。

列对齐和点击事件

.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(() => {this.currentPageIndex = button.index;
})
  • .alignItems(HorizontalAlign.Center):设置列交叉轴居中对齐。
  • .justifyContent(FlexAlign.Center):设置列主轴居中对齐。
  • .onClick(...):绑定点击事件处理函数,当按钮被点击时更新 currentPageIndex 为按钮的索引。

HomeTab布局

构建了一个包含底部导航栏的界面布局。使用TabsTabContent组件来构建一个带有多个标签页的布局,每个标签页都通过BottomNavigation函数生成按钮,这些按钮包含图像和文本,并且具有自适应布局和状态变化的功能。通过点击标签页按钮,可以更新currentPageIndex,从而改变当前显示的页面内容。

  • 示例代码
interface BottomNavigationProps {index: number;img: Resource;selectImg?: Resource;title: Resource | string;
}@Component
export default struct HomeTab {@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';@Link currentPageIndex: number;build() {Column() {Tabs({ barPosition: this.currentBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End }) {TabContent().tabBar(this.BottomNavigation({index: 0,img: $r('app.media.icon_message'),selectImg: $r('app.media.icon_message_selected'),title: '消息'}))TabContent().tabBar(this.BottomNavigation({index: 1,img: $r('app.media.icon_contacts'),selectImg: $r('app.media.icon_contacts_selected'),title: '通讯录'}))TabContent().tabBar(this.BottomNavigation({index: 2,img: $r("app.media.icon_social_circle"),selectImg: $r("app.media.icon_social_circle_selected"),title: '朋友圈'}))TabContent().tabBar(this.BottomNavigation({index: 3,img: $r('app.media.icon_me'),selectImg: $r('app.media.icon_me'),title: '我的'}))}.vertical(this.currentBreakpoint === 'lg').height('100%').margin({top: this.currentBreakpoint === 'lg' ? '' : '6.5vp',bottom: this.currentBreakpoint === 'lg' ? '' : '7.5vp'})}.backgroundColor('#F1F3F5').expandSafeArea([], [SafeAreaEdge.BOTTOM])}@BuilderBottomNavigation(button: BottomNavigationProps) {Column() {Image(this.currentPageIndex === button.index ? button.selectImg : button.img).objectFit(ImageFit.Contain).width(this.currentBreakpoint === 'lg' ? '24vp' : '22vp').height(this.currentBreakpoint === 'lg' ? '24vp' : '22vp')Text(button.title).fontColor(this.currentPageIndex === button.index ? '#0A59F7' : Color.Black).opacity(this.currentPageIndex === button.index ? 1 : 0.6).fontWeight(500).textAlign(TextAlign.Center).fontSize('10fp').lineHeight('14vp').fontFamily('HarmonyHeiTi-Bold').margin({ top: '4vp' })}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).onClick(() => {this.currentPageIndex = button.index;})}
}

Link状态存储

@Link currentPageIndex: number;
  • @Link:标记currentPageIndex为一个Link状态变量,子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
  • currentPageIndex:当前页面的索引。

标签页

Tabs({ barPosition: this.currentBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End }) {
  • Tabs:创建一个标签页组件。
  • barPosition:根据当前断点设置标签栏的位置,如果断点为 lg,则标签栏位置为Start,否则为End

安全区域

.backgroundColor('#F1F3F5')
.expandSafeArea([], [SafeAreaEdge.BOTTOM])
  • .expandSafeArea([], [SafeAreaEdge.BOTTOM]):扩展安全区域到底部,确保内容不会被系统导航栏遮挡。

实现效果图

在这里插入图片描述

参考文章

  • 栅格布局
  • 线性布局
  • 全局状态存储

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/46900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

guava cache知识点整理

Guava cache介绍 CacheBuilder 是 Guava 缓存库(Google 提供的一个 Java 工具库)中的一个类,用于创建和配置缓存实例。 Guava 缓存库提供了一套强大且易用的缓存解决方案,可以帮助开发者轻松地添加缓存功能以提高程序性能。而 Cac…

Java进阶之路66问 | 谈谈对熔断,限流,降级的理解

熔断(Circuit Breaker) 熔断机制类似于电路中的保险丝,用于在服务或系统出现异常或超负荷时暂时关闭,防止问题进一步扩大,待问题解决后再逐步恢复。这可以有效保护系统免受过载的影响。 想象你在使用电器时&#xff0…

JAVA 异步编程(异步,线程,线程池)一

目录 1.概念 1.1 线程和进程的区别 1.2 线程的五种状态 1.3 单线程,多线程,线程池 1.4 异步与多线程的概念 2. 实现异步的方式 2.1 方式1 裸线程(Thread) 2.1 方式2 线程池(Executor) 2.1.1 源码分析 2.1.2 线程池创建…

Linux exec 命令和Python exec 函数 区别

在 Linux 中,exec 是一个用于替换当前进程的命令,而在 Python 中,exec 是一个用于动态执行代码的函数。它们有不同的用途和语法。下面是它们的主要区别和解释为什么需要这样的设计。 Linux exec 命令 用途 在 Linux 中,exec 命…

南京邮电大学计算机考研考情分析!专业课均分127分!复试录取比例偏高近2:1!计算机类共录取543人!

南京邮电大学(Nanjing University of Posts and Telecommunications),位于南京市,简称南邮(NJUPT),是教育部、工业和信息化部、国家邮政局与江苏省共建高校,国家“双一流”建设高校&…

软考中级科目包含哪些?应该考哪个?

软考中级包含5个专业方向,分别是:计算机软件、计算机网络、计算机应用技术、信息系统、信息服务。这5个方向又对应15个软考中级科目。 信息系统包括:系统集成项目管理工程师、信息系统监理师、信息安全工程师、数据库系统工程师、信息系统管…

C# 中IEnumerable与IQuerable的区别

目的 详细理清IEnumerator、IEnumerable、IQuerable三个接口之间的联系与区别 继承关系:IEnumerator->IEnumerable->IQuerable IEnumerator:枚举器 包含了枚举器含有的方法,谁实现了IEnuemerator接口中的方法,就可以自定…

力扣Hot100之两数之和

解法一: 双层循环暴力求解,先在数组的一个位置定住然后在这个位置的后续位置进行判断,如果两个数加起来等于目标和那么就返回 class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for i,num in enumerate(num…

Laravel队列的魔法:高效异步任务处理指南

Laravel队列的魔法:高效异步任务处理指南 在现代Web应用开发中,异步任务处理是提升用户体验和应用性能的关键技术之一。Laravel框架内置了一个强大的队列系统,允许开发者将耗时的任务如发送邮件、处理数据等放入队列中异步执行。本文将深入探…

Windows 系统利用 SSH 和 WSL2 子系统当服务器

由于最近组内需要将一台 Windows 系统的电脑 W A W_A WA​ 转成能通过 SSH 访问,并且能用 Linux 命令当服务器运行。忙活了一天,终于是把全部东西弄通了。 安装 SSH 首先就是 W A W_A WA​ 先要安装 OpenSSH 服务,直接按照下面的教程安装…

HCIE是什么等级的证书?

HCIE(华为认证互联网专家,Huawei Certified Internetwork Expert)是华为认证体系中的最高等级证书。它要求考生具备在复杂网络环境中规划、设计、部署、运维和优化网络的能力。HCIE认证是华为认证体系中最具挑战性和含金量的认证之一&#xf…

RocketMQ实现分布式事务

RocketMQ的分布式事务消息功能,在普通消息基础上,支持二阶段的提交。将二阶段提交和本地事务绑定,实现全局提交结果的一致性。 1、生产者将消息发送至RocketMQ服务端。 2、RocketMQ服务端将消息持久化成功之后,向生产者返回Ack确…

NDK R25b 交叉编译FFMpeg4,项目集成,附库下载地址

1.准备工作 文件下载: NDK R25b下载地址:Android NDK历史版本下载网址 - 君*邪 - 博客园 (cnblogs.com) FFmpeg4.4.4 下载地址:https://ffmpeg.org/releases/ffmpeg-4.4.4.tar.xz 环境配置: 本次编译环境是在PC虚拟机中使用U…

普通人还有必要学习 Python 之类的编程语言吗?

在开始前分享一些编程的资料需要的同学评论888即可拿走 是我根据网友给的问题精心整理的对于编程的重要性,这里就不详谈了。 未来,我们和机器的交流会越来越多,编程可以简单看作是和机器对话并分发给机器任务。机器不仅越来越强大&#xff0…

QT下,如何获取控制台输入

最近工作中为了测试某个模块&#xff0c;需要把原先输入模块部分&#xff0c;改成控制台输入来方便测试。在QT中&#xff0c;我们可以使用 QTextStream 类来读取用户的输入来达到目的。下面是一个简单的例子&#xff1a; #include <QCoreApplication> #include <QTex…

C# —— CRC16 算法

CRC16:即循环冗余校验码。数据通信当中一种常用的查错校验码 其特征信息字段和校验字段的长度可以是任意选定的&#xff0c;对数据进行指定多项式计算 并且将得到的结果附加在帧的后面&#xff0c;接受的设备也执行类似的算法&#xff0c;以保证数据传输的正确性和完整性 crc…

Laravel的魔法纽带:深入理解Eloquent ORM的关联(Relationships)

Laravel的魔法纽带&#xff1a;深入理解Eloquent ORM的关联&#xff08;Relationships&#xff09; 在Laravel的世界中&#xff0c;Eloquent ORM&#xff08;对象关系映射&#xff09;是连接数据库和应用程序代码的桥梁。通过Eloquent&#xff0c;你可以轻松地定义和管理数据库…

鸿蒙语言基础类库:【@system.configuration (应用配置)】

应用配置 说明&#xff1a; 从API Version 7 开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.i18n]和[ohos.intl]。本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import configurati…

数据库安装部署教程

数据库的安装部署教程因不同的数据库管理系统&#xff08;DBMS&#xff09;而异&#xff0c;以下将以MySQL、SQL Server和Oracle为例&#xff0c;分别概述其安装部署的基本步骤。请注意&#xff0c;由于软件版本和操作系统的不同&#xff0c;具体步骤可能会有所变化。 一、MyS…

CSS Modules:重构前端样式的未来?

在前端开发领域&#xff0c;CSS Modules 是近年来备受关注的一种样式解决方案&#xff0c;它改变了传统 CSS 的全局共享模式&#xff0c;引入了一种局部作用域的概念。这种变化不仅提升了样式的可维护性和可复用性&#xff0c;还促进了组件化开发的进一步成熟。本文将深入探讨 …