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

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

ds 2025/8/21 16:07:09

今天制作标签栏，标签栏里面的有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) //设置圆角

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