当前位置：首页 > news >正文

使用tabs组件搭建UI框架

news 来源：原创 2025/7/28 4:30:45

本节任务

使用tabs组件搭建ui框架

包含页签：首页、动态、发布，会员购、我的。

涉及内容：

Tabs、TabContent组件
@Builder装饰器
属性模型封装，包括：接口、枚举、常量

界面原型

在这里插入图片描述

1 Tabs布局

在MainPage（如果没有创建该页面需提前创建）中删除原有代码，仅保留框架代码：

@Entry
@Component
struct MainPage {build() {}
}

使用tabs布局：

    Tabs({barPosition:BarPosition.End}){TabContent(){Text('首页')}.tabBar('首页')TabContent(){Text('动态')}.tabBar('动态')TabContent(){Text('发布')}.tabBar('发布')TabContent(){Text('会员购')}.tabBar('会员购')TabContent(){Text('我的')}.tabBar('我的')}.width('100%').height('100%')

预览效果：

在这里插入图片描述

2 TabBuilder定制

准备tab图标，可以统一图标风格，方便后续扩展：

https://iconpark.oceanengine.com/official

在这里插入图片描述

1)首先定义变量，保存当前页面索引

...
struct MainPage {@State pageIndex: number = 0;//页面索引...

2)封装tabitem

在ets下新建文件夹，命名为model，在model中新建arkts文件，命名为TabItemModel.

对tab进行封装：

export interface TabItem {icon: Resource;icon_selected: Resource;title?: string;id: number;
}//tab id
export enum TabID {HOME, //首页COMMUNITY, //动态PUBLISH,  // 发布SHOPPING, // 会员购MINE  //我的
}export const TabItemList: TabItem[] = [{icon:$r('app.media.home0'),icon_selected:$r('app.media.home1'),title: '首页',id: TabID.HOME},{icon:$r('app.media.dongtai0'),icon_selected:$r('app.media.dongtai1'),title: '动态',id: TabID.COMMUNITY},{icon:$r('app.media.fabu0'),icon_selected:$r('app.media.fabu1'),id: TabID.PUBLISH},{icon:$r('app.media.shopping0'),icon_selected:$r('app.media.shopping1'),title: '会员购',id: TabID.SHOPPING},{icon:$r('app.media.mine0'),icon_selected:$r('app.media.mine1'),title: '我的',id: TabID.MINE}
]

3）开始定制tabbar，在MainPage组件内编写代码：

  @Builder MyTabBuilder(idx: number){Column() {Image(idx === this.pageIndex ? TabItemList[idx].icon_selected: TabItemList[idx].icon).width(32).height(32)Text(TabItemList[idx].title).fontSize(14).fontWeight(FontWeight.Bold).fontColor(this.pageIndex === idx ? '#ff7fa6cf':'#888')}}

4）在build函数中调用，并控制页签换页：

  build() {Tabs({barPosition:BarPosition.End}){TabContent(){Text('首页')}//.tabBar('首页').tabBar(this.MyTabBuilder(TabID.HOME))TabContent(){Text('动态')}//.tabBar('动态').tabBar(this.MyTabBuilder(TabID.COMMUNITY))TabContent(){Text('发布')}//.tabBar('发布').tabBar(this.MyTabBuilder(TabID.PUBLISH))TabContent(){Text('会员购')}//.tabBar('会员购').tabBar(this.MyTabBuilder(TabID.SHOPPING))TabContent(){Text('我的')}//.tabBar('我的').tabBar(this.MyTabBuilder(TabID.MINE))}.width('100%').height('100%').onChange((index)=>{this.pageIndex = index;//控制换页})}

预览效果：

首页：

在这里插入图片描述

动态：

在这里插入图片描述

发布：

在这里插入图片描述

会员购：

在这里插入图片描述

我的：

在这里插入图片描述

代码仓：

https://gitee.com/snowyvalley/harmony-app-dev-basic-course.git

使用tabs组件搭建UI框架

本节任务使用tabs组件搭建ui框架包含页签：首页、动态、发布，会员购、我的。涉及内容： Tabs、TabContent组件Builder装饰器属性模型封装，包括：接口、枚举、常量界面原型 1 Tabs布局在MainPage（如果…...

编程日记 2025/7/28 4:30:45

jmeter跟踪重定向和自动重定向有什么区别？

在 JMeter 中，跟踪重定向和自动重定向有以下区别： 概念跟踪重定向：指的是 JMeter 会按照服务器返回的重定向信息，继续发送请求到重定向的目标地址，并记录下整个重定向的过程，包括重定向的地址、响应信息…...

编程日记 2025/7/27 2:35:07

unity3d实现物体闪烁

unity3d实现物体闪烁，代码如下: using UnityEngine;public class Test : MonoBehaviour {//创建一个常量，用来接收时间的变化值private float shake;//通过控制物体的MeshRenderer组件的开关来实现物体闪烁的效果private MeshRenderer BoxColliderClick…...

编程日记 2025/7/27 2:35:05

（三十）安卓开发中的MVP模式详解

在安卓开发中，MVP（Model-View-Presenter） 是一种常见的软件架构模式，它通过将应用程序的逻辑与用户界面分离，使得代码更加模块化、易于维护和测试。本文将详细讲解MVP模式的组成部分、工作流程、优点，并结合…...

编程日记 2025/7/28 4:29:58

独立ADC和MCU中ADC模块的区别

以图中两种方案为例： 使用独立ADC和使用MCU的内部ADC来实现模数转换，有什么性能、技术上的区别吗？ 集成和独立芯片各有优劣势： 1、集成的节约了板子空间，减少了外围设计。工艺也不一样，集成的工艺相对高一…...

编程日记 2025/7/28 4:17:59

微软Entra新安全功能引发大规模账户锁定事件

误报触发大规模锁定多家机构的Windows管理员报告称，微软Entra ID新推出的"MACE"（泄露凭证检测应用）功能在部署过程中产生大量误报，导致用户账户被大规模锁定。这些警报和锁定始于昨夜，部分管理员认为属于误…...

编程日记 2025/7/27 5:32:15

Ray Tracing（光线追踪）与 Ray Casting（光线投射）

Ray Casting（光线投射） 定义：一种从观察点（如摄像机）向场景中每个像素投射单条光线，找到最近可见物体的渲染技术。核心任务：确定像素对应的物体表面颜色，通常仅计算直接光照&#…...

编程日记 2025/7/27 5:32:13

Shell脚本-变量的分类

在Shell脚本编程中，变量是存储数据的基本单位。它们可以用来保存字符串、数字甚至是命令的输出结果。正确地定义和使用变量能够极大地提高脚本的灵活性与可维护性。本文将详细介绍Shell脚本中变量的不同分类及其应用场景，帮助你编写更高效、简洁的Shell脚…...

编程日记 2025/7/27 5:32:11

go for 闭环问题【踩坑记录】

Go 中的for 循环闭包问题，是每个 Go 程序员几乎都踩过的坑，也是面试和实际开发中非常容易出错和引起 bug 的地方。这里我会通过原理、示例、修正方法、背后机制等角度详细为你讲解。一、问题描述当你在 for 循环里写匿名函数（闭包&#xf…...

编程日记 2025/7/26 16:32:57

【分布式理论17】分布式调度3：分布式架构-从中央式调度到共享状态调度

文章目录一、中央式调度器1. 核心思想2. 工作流程3. 优缺点4. **典型案例：Google Borg** 二、两级调度器1. **核心思想**2. **工作流程**3. 优缺点4. **典型案例：Hadoop YARN** 三、共享状态调度器1. **核心思想**2. **工作流程**3. 优缺点4. **典型案例…...

编程日记 2025/7/27 5:32:07

Java高频面试之并发编程-04

hello啊，各位观众姥爷们！！！本baby今天来报道了！哈哈哈哈哈嗝🐶 面试官：调用 start()方法时会执行 run()方法，那为什么不直接调用 run()方法？ 多线程中调用 start() 方法…...

编程日记 2025/7/26 5:36:00

2025Java面试指南（附答案）

Java全家桶 Java基础 1. Java为什么被称为平台无关性语言？ 2. 解释下什么是面向对象？面向对象和面向过程的区别 3. 面向对象的三大特性？分别解释下？ 4. Java 中的参数传递时传值呢？还是传引用？ 5. JD…...

编程日记 2025/7/27 5:32:03

springboot对接阿里云大模型

阿里云百炼文档地址: 百炼控制台设置账号首先跟着文档设置账号，新建一个api key 文档地址: 百炼控制台对接会话API 你可以使用sdk来对接，但没有必要，因为所有接口对接都是http形式的，直接使用http库来对接就行了&#xff…...

编程日记 2025/7/27 5:32:01

理性决策与情绪偏差

“在愤怒中做决策，你会在懊悔中收拾残局。”—本杰明富兰克林在情绪激动时，我们往往容易做出冲动的决定。但等情绪平复，回过头来看，常常会发现这些决定并不如我们当初所想的那样明智。诺贝尔经济学奖得主在其行为经济学研究中提…...

编程日记 2025/7/27 15:25:59

基于LLM的响应式流式处理实践：提升用户体验的关键技术

基于LLM的响应式流式处理实践：提升用户体验的关键技术前言：当AI生成遇到用户等待焦虑在人工智能应用井喷式发展的今天，大语言模型（LLM）的文本生成延迟问题始终是开发者需要直面的挑战。想象这样一个场景&#xff1…...

编程日记 2025/7/27 5:31:57

2025年渗透测试面试题总结-拷打题库09（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录 2025年渗透测试面试题总结-拷打题库09 1. Linux系统加固降权思路 2. 系统后门检测工具 3. 绕过CDN获…...

编程日记 2025/7/26 21:16:12

批量替换多个 Word 文档中的指定图片

在 Word 文档中，我们可以插入各种各样的图片，比如插入 logo、插入设计图、施工图等等。在某些情况下，我们也会碰到需要将 Word 文档中某张图片替换成其它图片的场景，比如将旧的 Logo 替换成新的 Logo。当我们有大量的 Word 文档需…...

编程日记 2025/7/27 5:31:53

海外版高端Apple科技汽车共享投资理财系统

这一款PHP海外版高端Apple、科技汽车、共享投资理财系统phplaravel框架。...

编程日记 2025/7/27 5:31:51

打包报错1： Invalid Bundle. The bundle at ProductName.app/Frameworks/UnityFramework.framework contains disallowed file Frameworks. (ID: 87a95518-52e2-4ce0-983d-aab8d8006f11) 解决： Target > UnityFramework > Build Settings > Bu…...

编程日记 2025/7/27 5:31:49

新能源汽车零部件功率级测试方案搭建研究

摘要：本文旨在针对新能源汽车核心零部件功率级测试需求，提出基于Python与PyVISA的自动化测试方案。通过集成主流设备（如Keysight 34980A、功率分析仪等），构建多协议兼容（CAN、RS485等）的测试平台…...

编程日记 2025/7/27 5:31:47

DeepSeek与WPS的动态数据可视化图表构建

摘要在数据驱动决策的时代，动态数据可视化对于信息的高效传递与分析至关重要。本文聚焦于利用DeepSeek和WPS实现近百种动态数据可视化图表的技术应用，详细阐述其操作流程、技术原理及潜在价值。通过深入剖析这一技术组合的应用场景与实践意义&#xff0…...

编程日记 2025/7/27 5:31:44

XCTF-web（五）

Web_php_unserialize 当通过KaTeX parse error: Expected group after _ at position 42: …erialize，触发魔术方法_̲_wakeup和__destr…this->file)输出文件内容，若KaTeX parse error: Expected group after _ at position 17: …ile可控&#xff0…...

编程日记 2025/7/27 5:31:42

数字ic后端设计从入门到精通2（含fusion compiler, tcl教学）

上篇回顾上一篇文章需要讨论了net,pin的基础用法，让我们来看一下高级一点的用法 instance current_instance current_instance 是 Synopsys 工具（如 Fusion Compiler 或 Design Compiler）中用于在设计层次结构中导航的关键命令。它允许用…...

编程日记 2025/7/27 5:31:40

Vue2集成ElementUI实现左侧菜单导航

文章目录简介静态导航安装element-ui,vue-router,vuex编写router/index.jsmain.js中引入elementui,router编写左侧导航返回的菜单数据动态导航编写router/index.js左侧菜单通过for循环生成通过for循环递归生成 store/index.jsmain.js中引入store登录页面代码菜单返回数据总结…...

编程日记 2025/7/27 5:31:38

Flask API 项目 Swagger 版本打架不兼容

Flask API 项目 Swagger 版本打架不兼容 1. 问题背景在使用 Flask 3.0.0 时遇到以下问题： 安装 flask_restful_swagger 时，它强制将 Flask 降级到 1.1.4，并导致其他依赖（如 flask-sqlalchemy、flask-apispec）出现版…...

编程日记 2025/7/27 5:31:36

spark和Hadoop的区别和联系

区别计算模型 Hadoop：主要基于 MapReduce 计算模型，将任务分为 Map 和 Reduce 两个阶段，适合处理大规模的批处理数据，但在处理迭代式计算和交互式查询时性能相对较差。Spark：基于内存的分布式计算框架，采…...

编程日记 2025/7/27 5:31:34

Unity接入安卓SDK（2）接入方式

1 方式一：SDK打成aar形式放入Unity 把SDK编译成aar，然后把aar文件、manifest文件放入Unity工程的Assets/Plugins/Android目录下，以及libs下，没有的文件夹就自己新建. SDK的aar包也可以放入Assets/Plugins/Android目录中其中一…...

编程日记 2025/7/27 5:31:32

【HDFS入门】深入解析DistCp：Hadoop分布式拷贝工具的原理与实践

目录 1 DistCp概述与应用场景 2 DistCp架构设计解析 2.1 系统架构图 2.2 执行流程图 3 DistCp核心技术原理 3.1 并行拷贝机制 3.2 断点续传实现原理 4 DistCp实战指南 4.1 常用命令示例 4.2 性能优化策略 5 异常处理与监控 5.1 常见错误处理流程 5.2 监控指标建议…...

编程日记 2025/7/27 5:31:30

电力MOSFET漏源过电压与窄脉冲自保护驱动电路

1 电力MOSFET的漏源过电压 2 窄脉冲自保护驱动电路说明 3 脉冲变压器设计说明 1 电力MOSFET的漏源过电压如果器件接有感性负载，则当器件关断时，漏极电流的突变（di/dt）会产生比外部电源高的多的漏极尖峰电压，导致器件的击穿。电力MOSFET关断得越快，产生的过电压越高…...

编程日记 2025/7/26 7:56:58

【scikit-learn基础】--『监督学习』之均值聚类

聚类算法属于无监督学习，其中最常见的是均值聚类，scikit-learn中，有两种常用的均值聚类算法：一种是有名的K-means（也就是K-均值）聚类算法，这个算法几乎是学习聚类必会提到的算法；另一个是均值偏移聚类，它与K-means各有千秋，只是针对的应用场景不太一样，但是知名度…...

编程日记 2025/7/27 5:31:25

Android 15强制edge-to-edge全面屏体验

一、背景 Edge-to-edge 全面屏体验并非 Android 15 才有的新功能，早在 Android 15 之前系统就已支持。然而，该功能推出多年来，众多应用程序依旧未针对全面屏体验进行适配。因此，在 Android 15 的更新中，Google 终于决…...

编程日记 2025/7/27 5:31:23

广州可信数据空间上线：1个城市枢纽+N个产业专区+高质量数据集（附28个数据集清单）

广州数据要素市场今日迎来历史性突破！全国首个城市可信数据空间正式上线，首批28个高质量数据集同步出台，覆盖生物医药、智能装备、绿色低碳等12大产业领域，激活37个高价值场景。一、广州城市可信数据空间：1个城市枢纽…...

编程日记 2025/7/27 20:40:38

AgentGPT开源程序可以在浏览器中组装、配置和部署自主人工智能代理

一、软件介绍文末提供程序和源码下载学习 AgentGPT开源程序可以允许您配置和部署自主 AI 代理。命名您自己的定制 AI 并让它开始实现任何可想象的目标。它将通过思考要执行的任务、执行它们并从结果中学习来尝试达到目标。二、开始使用 AgentGPT 入门最简单的方式是使用项目…...

编程日记 2025/7/27 5:31:19

前端笔记-Axios

Axios学习目标 Axios与API交互1、Axios配置与使用2、请求/响应拦截器3、API设计模式（了解RESTful风格即可） 学习参考：起步 | Axios中文文档 | Axios中文网什么是Axios Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专…...

编程日记 2025/7/27 5:31:17

【EasyPan】MySQL主键与索引核心作用解析

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版 MySQL主键与索引核心作用解析一、主键（PRIMARY KEY）核心作用 1. 数据唯一标识 -- 创建表时定义主键 CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,use…...

编程日记 2025/7/26 11:58:12

基于RK3588+FPGA+AI YOLO的无人船目标检测系统（一）概述

无人船在海洋监测、资源勘测、海上安全和科学研究等领域扮演着关键角色， 提升了海上任务的执行效率和安全性。在这一过程中，环境感知技术和目标检测技术相辅相成，共同构建了系统的核心功能。随着人工智能行业的迅速发展，各种…...

编程日记 2025/7/27 5:31:13

无人船 | 图解基于PID控制的路径跟踪算法(以全驱动无人艇WAMV为例)

目录 1 PID控制基本原理2 基于全驱动运动学的PID控制3 跟踪效果分析 1 PID控制基本原理 PID控制是一种常用的经典控制算法，其应用背景广泛，例如工业自动化控制：温度控制、压力控制、流量控制、液位控制等过程控制系统多采用PID闭环&#x…...

编程日记 2025/7/27 5:31:10

为什么RPN经过的候选框处理后，要使用rcnn来进行候选框的分类和回归操作?

一句大白话总结：RPN是广撒网捕鱼，RCNN是细化鱼的分类和具体尺寸在目标检测任务中，RPN（区域提议网络） 生成的候选框需要经过 RCNN（如 Fast R-CNN、Faster R-CNN） 进行分类和回归，这…...

编程日记 2025/7/27 3:56:03

代码实战保险花销预测

文章目录摘要项目地址实战代码（初级版）实战代码（进阶版） 摘要本文介绍了一个完整的机器学习流程项目，重点涵盖了多元线性回归的建模与评估方法。项目详细讲解了特征工程中的多项实用技巧，包括&#xff1…...

编程日记 2025/7/27 1:33:11

8.1 线性变换的思想

一、线性变换的概念当一个矩阵 A A A 乘一个向量 v \boldsymbol v v 时，它将 v \boldsymbol v v “变换” 成另一个向量 A v A\boldsymbol v Av. 输入 v \boldsymbol v v，输出 T ( v ) A v T(\boldsymbol v)A\boldsymbol v T(v)Av. 变换 T T T…...

编程日记 2025/7/27 5:31:03

PythonWeb

参考：如何安装 Django |Django 文档 |姜戈一、框架搭建 1、安装Django框架 pip3 install django 2、查看是否安装成功 pip3 show django 这样显示就是成功了 3、初始化项目你想在哪个路径就 cd到哪个路径下输入一下命令就可以 django-admin startproject my…...

编程日记 2025/7/27 4:19:52

【大模型ChatGPT +DeepSeeK+python】最新AI赋能Python长时序植被遥感动态分析、物候提取、时空变异归因及RSEI生态评估

在遥感技术与人工智能深度融合的2025年，AI大模型正重塑长时序植被遥感数据分析范式。从Landsat/Sentinel卫星数据的智能化去云处理，到MODIS植被产品的AI辅助质量控制，以ChatGPT 、DeepSeeK为代表的大模型技术已成为提升遥感数据处理效率与精度…...

编程日记 2025/7/27 7:10:20

精益数据分析（11/126）：辨别虚荣指标，挖掘数据真价值

精益数据分析（11/126）：辨别虚荣指标，挖掘数据真价值大家好！在创业和数据分析的学习道路上，我一直希望能和大家携手前行、共同进步。今天，咱们接着深入研读《精益数据分析》，这次聚…...

编程日记 2025/7/27 2:34:59

Time to event ：Kaplan-Meier曲线、Log Rank检验与Shiny R

代码： # 创建数据框 data_a <- data.frame( usubjid = c(1- 1, 1- 2, 1- 3, 1- 4, 1- 5, 1- 6, 1- 7, 1- 8, 1- 9, 1-10, 2- 1, 2- 2, 2- 3, 2- 4, 2- 5, 2- 6, 2- 7, 2- 8, 2- 9, 2-10), cnsr = c(0,1,0,1,0,1,0,0,0,1,…...

编程日记 2025/7/27 5:31:01

线上救急-AWS限频

线上救急-AWS限频问题在一个天气炎热的下午，我正喝着可口可乐，悠闲地看着Cursor生成代码，忽然各大群聊中出现了加急➕全体的消息，当时就心里一咯噔，点开一看，果然，线上服务出问题&#xff0…...

编程日记 2025/7/27 5:30:59

JavaWeb学习打卡-Day1-分层解耦、Spring IOC、DI

三层架构 Controller（控制层）：接收前端发送的请求，对请求进行处理，并响应数据。Service（业务逻辑层）：处理具体的业务逻辑。DAO（数据访问层/持久层）&#xff…...

编程日记 2025/7/27 5:30:57

【LeetCode】1.两数之和

目录 📚 题目概要🧰 前置知识🚧 问题难点🔑 关键思路步骤拆解 💻 代码实现代码注释 📊 复杂度分析❗ 易错点与测试案例易错点测试案例 🔗 总结与扩展模式归纳核心思维 📚 题目概要在…...

编程日记 2025/7/27 5:30:55

mongodb 存储数据的具体实现方式

MongoDB 存储数据的具体实现方式涉及数据模型、存储引擎、分片机制等多个核心模块，以下是其实现原理的详细分析： 一、数据模型 1.1 文档型数据模型‌ MongoDB 使用 BSON格式存储数据，支持键值对、嵌套文档和数组等复杂结构。 1.2 无模式设…...

编程日记 2025/7/26 22:11:47

【手机】vivo手机应用声音分离方案

文章目录前言方案前言尝试分离vivo手机音乐与其他应用的声音方案最佳方案：网易云音乐设置内关闭音量均衡上传不同的白噪音，成功 goodlock，主要适用于三星手机，vivo不一定适用 app volume control ，可行...

编程日记 2025/7/27 5:30:53

多级缓存架构，让系统更快的跑起来！

大家好，今天，咱们来聊聊一个超级实用的话题——多级缓存架构。别一听“架构”俩字就头大，我保证，这篇文章既有趣又易懂，让你秒变缓存小达人！一、多级缓存，为啥这么火？在互联网的汪洋大海里，数据就是咱们的宝藏。但每次从数据库里捞数据，都跟挖宝藏似的，慢得很！…...

编程日记 2025/7/27 5:30:51

本节任务

1 Tabs布局

2 TabBuilder定制

相关文章：