鸿蒙仓颉开发语言实战教程：自定义组件
【摘要】 关于仓颉开发语言我们已经连续分享了很多天，相信大家对于仓颉开发语言已经有了一定的了解。今天我们继续进阶，分享一个仓颉开发语言中的自定义组件知识。本文案例就以上一篇文章中的自定义tabbar为例，因为我们自己开发的tabbar一直放在index.cj文件中总是不太好的，还是要把它拿出来封装一下。为了较大型项目的文件管理，我在cangjie文件夹下创建了components文件夹，然后在这里创建...
internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
@Component
public class yltababar {
func build() {
}
}var tabList: Array<TabItem>@Link var currenttabIndex:Int64package ohos_app_cangjie_entry.components
internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app
import ohos_app_cangjie_entry.model.TabItem
import std.os.posix.link
import std.console.Console
@Component
public class yltababar {
var tabList: Array<TabItem>
@Link var currenttabIndex:Int64
var controller: TabsController = TabsController()
func build() {
Row {
ForEach(this.tabList, itemGeneratorFunc: {item: TabItem, index: Int64 =>
Column {
if(this.currenttabIndex == index){
Image(item.selectIcon).width(28).height(28)
Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)
}else {
Image(item.icon).width(28).height(28)
Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)
}
}
.onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})
})
}
.width(100.percent)
.height(60)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)
}
}##HarmonyOS语言##仓颉##购物#
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）