玩转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’，这可能表示屏幕宽度的断点。

布局和结构

  • GridRow和 GridCol：表示一个栅格布局，GridRow 包含一行，GridCol 表示该行中的一列。
  • columns: 1和 span: 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布局

构建了一个包含底部导航栏的界面布局。使用Tabs和TabContent组件来构建一个带有多个标签页的布局，每个标签页都通过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，一经查实，立即删除！

相关文章

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

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

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

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 线程池创建…
阅读更多...
南京邮电大学计算机考研考情分析！专业课均分127分！复试录取比例偏高近2：1！计算机类共录取543人！

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

南京邮电大学（Nanjing University of Posts and Telecommunications），位于南京市，简称南邮（NJUPT），是教育部、工业和信息化部、国家邮政局与江苏省共建高校，国家“双一流”建设高校&…
阅读更多...
软考中级科目包含哪些？应该考哪个？

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

软考中级包含5个专业方向，分别是：计算机软件、计算机网络、计算机应用技术、信息系统、信息服务。这5个方向又对应15个软考中级科目。 信息系统包括：系统集成项目管理工程师、信息系统监理师、信息安全工程师、数据库系统工程师、信息系统管…
阅读更多...
C# 中IEnumerable与IQuerable的区别

C# 中IEnumerable与IQuerable的区别

目的 详细理清IEnumerator、IEnumerable、IQuerable三个接口之间的联系与区别 继承关系：IEnumerator->IEnumerable->IQuerable IEnumerator：枚举器 包含了枚举器含有的方法，谁实现了IEnuemerator接口中的方法，就可以自定…
阅读更多...
力扣Hot100之两数之和

力扣Hot100之两数之和

解法一： 双层循环暴力求解，先在数组的一个位置定住然后在这个位置的后续位置进行判断，如果两个数加起来等于目标和那么就返回 class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for i,num in enumerate(num…
阅读更多...
Windows 系统利用 SSH 和 WSL2 子系统当服务器

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

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

HCIE是什么等级的证书？

HCIE（华为认证互联网专家，Huawei Certified Internetwork Expert）是华为认证体系中的最高等级证书。它要求考生具备在复杂网络环境中规划、设计、部署、运维和优化网络的能力。HCIE认证是华为认证体系中最具挑战性和含金量的认证之一&#xf…
阅读更多...
RocketMQ实现分布式事务

RocketMQ实现分布式事务

RocketMQ的分布式事务消息功能，在普通消息基础上，支持二阶段的提交。将二阶段提交和本地事务绑定，实现全局提交结果的一致性。 1、生产者将消息发送至RocketMQ服务端。 2、RocketMQ服务端将消息持久化成功之后，向生产者返回Ack确…
阅读更多...
NDK R25b 交叉编译FFMpeg4，项目集成，附库下载地址

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 之类的编程语言吗？

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

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

C# —— CRC16 算法

CRC16:即循环冗余校验码。数据通信当中一种常用的查错校验码 其特征信息字段和校验字段的长度可以是任意选定的，对数据进行指定多项式计算 并且将得到的结果附加在帧的后面，接受的设备也执行类似的算法，以保证数据传输的正确性和完整性 crc…
阅读更多...
鸿蒙语言基础类库：【@system.configuration (应用配置)】

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

应用配置 说明： 从API Version 7 开始，该接口不再维护，推荐使用新接口[ohos.i18n]和[ohos.intl]。本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 导入模块 import configurati…
阅读更多...
云服务器实际内存与购买不足量问题

云服务器实际内存与购买不足量问题

君衍 一、本篇缘由二、问题研究1、dmidecode2、dmesg | grep -i memory 三、kdump四、解决方案1、卸载kdump-tools2、清理依赖包3、修改配置文件4、重新生成配置文件5、重启服务器6、再次查看 一、本篇缘由 本篇由于最近买了云服务器，之前基本在本地使用VMware进行虚…
阅读更多...
web自动化测试selenium的基本使用

web自动化测试selenium的基本使用

目录 初始化浏览器并打开网页 定位网页元素 定位的方法 模拟键盘操作 模拟鼠标操作 xpath方法 xpath结点 路径表达式 轴 selenium是一个很流行的自动化测试的库，主要用于模拟浏览器的运行，是web应用测试的工具。 在使用selenium时，…
阅读更多...
JVM知识点梳理

JVM知识点梳理

阅读更多...
(二)高并发压力测试调优篇——caffeine本地缓存调优

(二)高并发压力测试调优篇——caffeine本地缓存调优

前言 在上一节内容中我们主要介绍了高并发请求下，mysql数据库的调优，其调优的主要原理是尽量减少数据库的IO操作，从而提高服务器的访问性能。在此基础上，本节内容是关于如何利用缓存，提高系统的并发访问能力。我们会首…
阅读更多...
Linux部署禅道（无脑复制版）

Linux部署禅道（无脑复制版）

目录 环境部署1、下载，解压2、启动3、设置开机自启 登录禅道登录数据库1、设置账号2、网页登录数据库 环境 Linux系统 Centos7 《Linux一键安装包安装禅道》视频链接： https://www.zentao.net/zentao-install/zentao-linux-install-80523.html 部署 …
阅读更多...
谢启昆：乾隆年间的清廉典范与学术巨擘

谢启昆：乾隆年间的清廉典范与学术巨擘

谢启昆，一位生活在清朝乾隆年间的杰出人物，以其清廉的政绩和卓越的学术成就，成为后世效仿的典范。他的画像中，目光如炬，透露出坚毅与智慧的光芒，仿佛在诉说着他不平凡的一生。 谢启昆出生在一个书香门第&am…
阅读更多...
多元统计分析概述

多元统计分析概述

目录 1. 多元回归分析 2. 主成分分析（PCA） 3. 因子分析 4. 判别分析 5. 聚类分析 6. 多维尺度分析（MDS） 结论 多元统计分析是一组用于分析多个变量之间关系的统计方法。它广泛应用于各个领域，如市场研究、生物医…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023