仓颉鸿蒙开发:制作底部标签栏
今天制作标签栏,标签栏里面的有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
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!