一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

自定义导航栏与自定义构建函数

自定义导航栏与自定义构建函数

文章概叙

本文主要讲的是自定义导航栏Tabs,并使用到@builder装饰器来做自定义构建函数,本文的代码较长,建议使用电脑端查看。

书接上回

以Tabs作为例子介绍鸿蒙组件的结构

上回的代码使用了Tabs实现了切换卡片的效果,但很多时候,我们的底部栏并不是只有一个文字,还要有图标以及切换的效果,甚至还要求我们的某一个TabBar是独一无二的,所以自定义导航栏是一定要实现的。

在ArkUI中,自然有自定义导航栏的实现,而由于这一部分是公共的,所以我们可以将其抽出来,作为一个函数去”渲染”,而由于该效果是只有当前页面才有的,因此我们只需要将其定义在当前的组件中,无需再去定义一个组件,所以我们选择的是@Builder的自定义函数。

ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

自定义函数的语法如下:

@Builder MyBuilderFunction(paramsA,paramsB){ 
   // ui布局
 }

而当我们使用的时候,只需要很方便地去调用该方法即可,因为是在内部的,所以需要添加this。

this.MyBuilderFunction()

开始代码

作为轻量级的UI元素复用机制,自定义函数的最大好处自然是复用,以及可以在函数中调用我们的参数,而不需要具体的将之前定义好的参数传进去.

按照自然的思路,我们想要实现的效果是tabBar中既有文字,又有icon,且当前tab被渲染的时候,还会显示出另一个icon。

因此,我们的自定义函数需要传入四个参数,分别是文字,未被选中的icon,被选中的icon,以及当前tabbar的下标,既

  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)

需要注意的是,第三行的”currentIndex”代表的是当前tab选中,而这个参数是在tabs的“onChange”监听函数中获得的。

想使用这个函数的时候,我们可以在tabBar这么写

 .tabBar(this.TabBuilder(this.tabList[1].name,
        1,
        this.tabList[1].selected_icon,
        this.tabList[1].unselected_icon))

因为返回的是一个组件,所以不需要再做啥了。

最后的代码如下

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  tabList: {
    name: string,
    unselected_icon: Resource,
    selected_icon: Resource
  }[] = [
    { name: "发现",
      unselected_icon: $r("app.media.found_unselect"),
      selected_icon: $r("app.media.found_select"),
    },
    { name: "我的",
      unselected_icon: $r("app.media.mine_unselect"),
      selected_icon: $r("app.media.mine_select")
    }]
​
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .margin({ top: 5 })
        .fontSize(16)
        .fontColor(this.currentIndex === targetIndex ? '#FFAA00' : '#3A9B78')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }
​
  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text(`这个是${this.tabList[0].name}`)
      }
      .tabBar(this.TabBuilder(
        this.tabList[0].name,
        0,
        this.tabList[0].selected_icon,
        this.tabList[0].unselected_icon)
      )
      .backgroundColor("#ccc")
​
      TabContent() {
        Text(`这个是${this.tabList[1].name}`)
      }
      .tabBar(this.TabBuilder(this.tabList[1].name,
        1,
        this.tabList[1].selected_icon,
        this.tabList[1].unselected_icon))
      .backgroundColor("#ccc")
    }
    .width("100%")
    .height("100%")
    .onChange((index) => {
      this.currentIndex = index
    })
  }
}

效果图如下

自定义导航栏与自定义构建函数

对于自定义构建函数,没啥好讲的,记得添加一个@builder就可以了。

而代码中的四个文件的资源,都是放在media目录下的,使用”$r”的形式去读取到本地的resourece​

个人公众号

呜呜呜,个人公众号求关注,主要讲的是React、NodeJs、Javascript以及鸿蒙等的开发文章,主要是公众号上的都是连贯的,对大佬们观看比较方便。

公众号上的文章

原文链接:https://juejin.cn/post/7317252368546021416 作者:做全栈开发的前端开发搬砖林小白

(0)
上一篇 2023年12月28日 下午5:07
下一篇 2023年12月28日 下午5:17

相关推荐

发表评论

登录后才能评论