玩转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.rhkb.cn/news/377987.html

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

相关文章

[图解]SysML和EA建模住宅安全系统-14-黑盒系统规约

[图解]SysML和EA建模住宅安全系统-14-黑盒系统规约

1 00:00:02,320 --> 00:00:07,610 接下来，我们看下一步指定黑盒系统需求 2 00:00:08,790 --> 00:00:10,490 就是说，把这个系统 3 00:00:11,880 --> 00:00:15,810 我们的目标系统，ESS，看成黑盒 4 00:00:18,030 --> …
阅读更多...
Home Assistant在windows环境安装

Home Assistant在windows环境安装

Home Assistant是什么？ Home Assistant 是一个开源的智能家居平台，旨在通过集成各种智能设备和服务，提供一个统一的、可自定义的家庭自动化解决方案。它可以允许用户监控、控制和自动化家中的各种设备，包括灯光、温度、安全系统、…
阅读更多...
公司想无偿裁员，同事赖着不走

公司想无偿裁员，同事赖着不走

关注卢松松，会经常给你分享一些我的经验和观点。 这招好像也不错! 事情是这样的：某公司准备把成本高的员工都裁掉，主要包含研发部和程序员，总共18个人，准备裁掉10人，因为他们工资开的太高了，…
阅读更多...
【GD32】从零开始学GD32单片机 | WDGT看门狗定时器+独立看门狗和窗口看门狗例程（GD32F470ZGT6）

【GD32】从零开始学GD32单片机 | WDGT看门狗定时器+独立看门狗和窗口看门狗例程（GD32F470ZGT6）

1. 简介 看门狗从本质上来说也是一个定时器，它是用来监测硬件或软件的故障的；它的工作原理大概就是开启后内部定时器会按照设置的频率更新，在程序运行过程中我们需不断地重装载看门狗，以使它不溢出；如果硬件或软件发生…
阅读更多...
基于pytesseract的OCR图片识别

基于pytesseract的OCR图片识别

简介 pytesseract是基于谷歌的tesseract的OCR包，支持识别一些简单的数字、字母、中文。 安装 安装引擎 下载地址：https://digi.bib.uni-mannheim.de/tesseract/ 一般是Windows 64位系统最新版： 如果要识别中文，注意选中中文…
阅读更多...
python每日一题：回文数

python每日一题：回文数

题干 给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。 回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121 是回文&#xff0…
阅读更多...
02：项目二：感应开关盖垃圾桶

02：项目二：感应开关盖垃圾桶

感应开关盖垃圾桶 1、PWM开发SG901.1、怎样通过C51单片机输出PWM波？1.2、通过定时器输出PWM波来控制SG90 2、超声波测距模块的使用3、感应开关盖垃圾桶 需要材料： 1、SG90舵机模块 2、HC-SR04超声波模块 3、震动传感器 4、蜂鸣器 5、若干杜邦线 1、PWM开…
阅读更多...
LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

文章目录 前言self querying 简介代码实现总结 前言 现在比较流行的 RAG 检索就是通过大模型 embedding 算法将数据嵌入向量数据库中，然后在将用户的查询向量化，从向量数据库中召回相似性数据，构造成 context template, 放到 LLM 中进行查询…
阅读更多...
【香橙派AiPro】基于VGG16的火灾检测模型预测

【香橙派AiPro】基于VGG16的火灾检测模型预测

目录 引言开发板介绍开发板使用准备工作工具文档 拨码开关镜像烧录连接开发板下载MobaXterm网线-SSH连接开发板设置WIFI连接WIFI-SSH连接开发板确定开发板IP方法 Vnc可视化WindowsiPad 开发工具安装 散热风扇基于VGG16的火灾检测模型预测数据集准备目录结构代码操作 安装宝塔最…
阅读更多...
Puppeteer 是什么以及如何在网络抓取中使用它 | 2024 完整指南

Puppeteer 是什么以及如何在网络抓取中使用它 | 2024 完整指南

网页抓取已经成为任何处理网页数据提取的人都必须掌握的一项重要技能。无论你是开发者、数据科学家还是希望从网站收集信息的爱好者，Puppeteer都是你可以使用的最强大工具之一。本完整指南将深入探讨什么是Puppeteer以及如何有效地在网页抓取中使用它。 Puppeteer简…
阅读更多...
【Neural signal processing and analysis zero to hero】- 1

【Neural signal processing and analysis zero to hero】- 1

The basics of neural signal processing course from youtube: 传送地址 Possible preprocessing steps Signal artifacts (not) to worry about doing visual based artifact rejection so that means that before you start analyzing, you can identify those data epic…
阅读更多...
有关电力电子技术的一些相关仿真和分析：⑤交-直-交全桥逆变+全波整流结构电路（MATLAB/Siumlink仿真）

有关电力电子技术的一些相关仿真和分析：⑤交-直-交全桥逆变+全波整流结构电路（MATLAB/Siumlink仿真）

全桥逆变+全波整流结构 参数：Vin=500V, Vo=200V, T=2:1:1, RL=10Ω, fs=100kHz, L=1mH, C=100uF （1）给定输入电压，输出电压和主电路参数，仿真研究电路工作原理，分析工作时序； （2）调节负载电阻，实现电流连续和断续，并仿真验证； （3）调节占空比，分析占空比与电…
阅读更多...
微软Edge浏览器深度解析：性能、安全性与特色功能全面评测

微软Edge浏览器深度解析：性能、安全性与特色功能全面评测

一、引言 自Windows 10操作系统推出以来，微软Edge浏览器作为默认的网页浏览器，凭借其现代化的设计和出色的性能表现，逐渐获得了用户的认可。本文旨在对Edge浏览器进行深入分析，探讨其在多个方面的表现。 二、界面与操作体验 界面…
阅读更多...
初识STM32：芯片基本信息

初识STM32：芯片基本信息

STM32简介 STM32是ST公司基于ARM公司的Cortex-M内核开发的32位微控制器。 ARM公司是全球领先的半导体知识产权（IP）提供商，全世界超过95%的智能手机和平板电脑都采用ARM架构。 ST公司于1987年由意大利的SGS微电子与法国的Thomson半导体合并…
阅读更多...
多样化数据可视化方法的全面示例：基于Python的多样化数据可视化

多样化数据可视化方法的全面示例：基于Python的多样化数据可视化

文章目录 前言代码效果展示 前言 本文演示了使用Python进行温度数据的多样化可视化方法。通过导入、处理和分析气象数据，我们生成了多种图表，包括直方图、核密度估计图、箱型图、小提琴图、条形图、山脊图、经验累积分布函数图和折线图。这些图表帮助我…
阅读更多...
Zookeeper之CAP理论及分布式一致性算法

Zookeeper之CAP理论及分布式一致性算法

CAP理论 CAP理论告诉我们，一个分布式系统不可能同时满足以下三种 一致性（C:consistency）可用性（A:Available）分区容错性（P:Partition Tolerance） 这三个基本要求，最多只能同时满足…
阅读更多...
【Pytorch】数据集的加载和处理（一）

【Pytorch】数据集的加载和处理（一）

Pytorch torchvision 包提供了很多常用数据集 数据按照用途一般分为三组：训练（train）、验证（validation）和测试（test）。使用训练数据集来训练模型，使用验证数据集跟踪模型在训练期间…
阅读更多...
c++包管理器

c++包管理器

conan conan search，查看网络库 conan profile detect，生成缓存信息conan new cmake_exe/cmake_lib，创建cmakelists.txtconan install .，执行Conanfile.txt中的配置，生成相关的bat文件 项目中配置Conanfile.txt(或者…
阅读更多...
【AIGC】二、mac本地采用GPU启动keras运算

【AIGC】二、mac本地采用GPU启动keras运算

mac本地采用GPU启动keras运算 一、问题背景二、技术背景三、实验验证本机配置安装PlaidML安装plaidml-keras配置默认显卡 运行采用 CPU运算的代码step1 先导入keras包，导入数据cifar10，这里可能涉及外网下载，有问题可以参考[keras使用基础问题…
阅读更多...
linux后门教程

linux后门教程

linux后门教程 alias 用法 系统默认别名：alias 设置别名：alias lsls -laih 删除别名：unalias ls **加参数：**alias ls‘ls -laih;pwd’ 注意 系统启动默认加载的配置文件 /etc/profile 切换用户就会执行/etc/profile /etc/bash…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023