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

仓颉鸿蒙开发:制作底部标签栏

今天制作标签栏,标签栏里面的有4个区域:首页、社区、消息、我的,以及对应的图标。点击的区域显示为高亮,未点击的区域显示为灰色

简单的将视图上面区域做一下

一、制作顶部公共视图部分

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.resource_manager.*@Component
public class TopView {func build() {Row(10) {Image(@r(app.media.cjLoge1)).width(50).height(50)Text("仓颉鸿蒙开发集成应用").fontSize(22).fontWeight(FontWeight.Bold)}.width(100.percent).height(12.percent).justifyContent(FlexAlign.Center)}
}

二、中间内容部分:添加了两个文本组件

            //中间内容区Column() {Text("仓颉鸿蒙").fontSize(36).fontColor(0x00BFFF)Text("制作底部标签栏").fontSize(30).fontColor(0x00BFFF)}.width(100.percent).height(80.percent).justifyContent(FlexAlign.Center)

三、底部标签栏的制作

        1.新建一个数组,用于存放文字内容和图标位置信息,方便使用循环遍历
    //定义底部标签栏数组,数组中的元素为元组类型var menuDatas: Array<(String, String)> = [("首页", "resource://media/house_fill.svg"),("社区", "resource://media/beidou_satellite_fill.svg"),("消息", "resource://media/ellipsis_message_fill.svg"),("我的", "resource://media/person_crop_circle_fill_1.svg")]
        2.标签栏分为4个区域:首页、社区、消息、我的,采用行布局;每个区域由图片组件和文本组件组成,采用列布局;而这些信息已经存放在数组里面了,使用FouEach循环遍历数组,为每一个元素添加组件信息;设置点击事件,通过判断索引号是否相等,将选中的标签设置为高亮颜色,未选中的标签颜色为灰色
    @Statevar currentIndex: Int64 = 0 //记录当前点击的索引号
            //底部标签栏Row() {ForEach(this.menuDatas,itemGeneratorFunc: {item: (String, String), index: Int64 => Column() {Image(item[1]).width(30).height(30).fillColor(if (this.currentIndex == index) {0x00BFFF} else {0xD3D3D3})Text(item[0]).fontSize(14).fontWeight(Bold).fontColor(if (this.currentIndex == index) {0x00BFFF   // 相等,设置为高亮色} else {0xD3D3D3   //不相等,设置为灰色})}.width(20.percent).height(100.percent).justifyContent(FlexAlign.Center)//对每一块设置点击事件.onClick({event =>this.currentIndex = indexHilog.info(0x000000, "hilog", "当前点击的索引为:${this.currentIndex}")})})}.width(100.percent).height(8.percent).backgroundColor(0xF5F5F5).justifyContent(FlexAlign.SpaceBetween).borderRadius(5) //设置圆角

        模拟机运行效果:例如,点击“消息”,显示为高亮

   


        最后,标签栏中使用的图标为svg格式,因为image组件中的fillColor构造函数,仅对svg图源生效。

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

相关文章:

  • 鸿蒙OS基于UniApp的WebRTC视频会议系统实践:从0到1的HarmonyOS适配之路#三方框架 #Uniapp
  • Spring Boot 中的 Web 应用与 Reactive Web 应用
  • React 路由管理与动态路由配置实战
  • Java中的JSONObject详解:从基础到高级应用
  • 【数据结构】图的存储(十字链表)
  • 什么是子查询?相关子查询的性能问题?
  • 高效Excel数据净化工具:一键清除不可见字符与格式残留
  • 批量导出CAD属性块信息生成到excel——CAD C#二次开发(插件实现)
  • 重读《人件》Peopleware -(14)Ⅱ 办公环境 Ⅶ 把门带上
  • 【解决】【亲测下载obsidian可行】打不开github.com 或者 加速访问 github
  • 从零开始的git学习
  • [ElasticSearch] RestAPI
  • Spring Boot,注解,@ConfigurationProperties
  • OpenFeign和Gateway集成Sentinel实现服务降级
  • 网络协议的原理及应用层
  • Vue-2-前端框架Vue基础入门之二
  • 《深度解构现代云原生微服务架构的七大支柱》
  • 儿童节快乐,聊聊数字的规律和同余原理
  • C++代码常见问题解析与优化(虚函数)
  • 从架构视角设计统一网络请求体系 —— 基于 uni-app 的前后端通信模型
  • 【设计模式-3.4】结构型——代理模式
  • QT-JSON
  • B站视频下载器 v1.0.4|免登录下载1080P视频
  • LabVIEW双光子显微镜开发
  • C++四种类型转换方式
  • 017搜索之深度优先搜索——算法备赛
  • 宝塔专属清理区域,宝塔清理MySQL日志(高效释放空间)
  • Azure Devops 系列之三- vscode部署function app
  • LeetCode算法题 (搜索二维矩阵)Day18!!!C/C++
  • 李臻20242817_安全文件传输系统项目报告_第14周