We have been sharing about the Cangjie language development for many consecutive days. We believe that everyone has gained a certain understanding of the Cangjie language development. Today, we will continue to advance and share knowledge about custom components in the Cangjie development language.

This article takes the custom tabbar in the previous article as an example. Since the tabbar we developed ourselves has always been placed in the index.cj file, it is always not good. We still need to take it out and encapsulate it.

For the file management of larger projects, I created the components folder under the cangjie folder, and then created the component files here. The file I created was yltabbar.cj.

After creating the file, you can see that only one line of code has been initialized. We still take the four major references and then add the build method. Note that custom components do not need to be modified by @Entry; only @Component:

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
@Component
public class yltababar {
    func build() {

    }
}

Then copy the content of tabbar to the build method.

Now if we want to pass some parameters to the custom component, such as the element list of tabbar, you can write it like this:

var tabList: Array

This is a parameter passed unidirectionally between parent and child, which can only be passed from the parent component to the parent component. We also have a parameter, currenttabIndex, which is used to record the serial number of the currently selected element. This parameter is also needed in the parent component. At this time, the @link modifier needs to be used:

@link var currenttabIndex:Int64

Now components can be used in the page and parameters can be passed:

yltababar(tabList:this.tabList,currenttabIndex:this.currenttabIndex)

Finally, I’d like to share the complete code of the encapsulated component with you all:

package 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 Language ## Cangjie ## Shopping