4

HarmonyOS应用开发实战-公共TitleBar的开发

 2 months ago
source link: https://blog.51cto.com/u_16591058/10511540
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

HarmonyOS应用开发实战-公共TitleBar的开发

精选 原创

Wylence 2024-04-18 15:32:27 ©著作权

文章标签 鸿蒙 TitleBar 文章分类 TypeScript 前端开发 阅读数128

鸿蒙项目开发中，各个page中通常都会有TitleBar，显示标题和返回按钮，但是各个界面又具有差异性，可能不需要展示返回、可能右侧需要文字或者图片。每个界面都去写一遍TitleBar很是繁琐，因此封装一个通用的TitleBar还是很有必要的。

1.话不多说，先展示样式

HarmonyOS应用开发实战-公共TitleBar的开发_鸿蒙

HarmonyOS应用开发实战-公共TitleBar的开发_鸿蒙_02

HarmonyOS应用开发实战-公共TitleBar的开发_鸿蒙_03

HarmonyOS应用开发实战-公共TitleBar的开发_鸿蒙_04

HarmonyOS应用开发实战-公共TitleBar的开发_鸿蒙_05

2.设计思路

开始想着这不简单么，直接Row()横向排上就好，该显示的显示，该隐藏的隐藏。开发过程发现Title会始终不居中，每个样式的标题都会离中间的位置有差距。所以需要调整，尝试了Flex，其实和Row()一样存在问题。最终选择Stack()作为根目录，覆盖的方式来实现。第一层先是标题，第二层是返回按钮+右侧图标或文字。顺序不可以调换，涉及到后续的点击事件触发，返回按钮点击事件直接router.back()。右侧文字和图标的点击事件需要传递进来触发。

3.封装代码

import router from '@ohos.router'
/**
 * TitleBar-标题栏
 */
@Preview
@Component
export default struct TitleBar {
  isShow: Boolean = true;//是否有返回按钮  默认:true
  title: string = '' //中间标题
  rightImg: Resource;//右侧图标
  rightTxt: string = '';//右侧文字
  onRightTxtClick?: () => void;//右侧文字点击事件
  onRightImgClick?: () => void;//右侧图标点击事件

  build() {

    Stack() {
      Text(this.title)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .maxLines(1)
        .fontSize('22fp')

      Row() {
        Image($r('app.media.ic_arrow_left'))
          .width('30vp')
          .height('30vp')
          .objectFit(ImageFit.Fill)
          .margin({ left: '10vp' })
          .onClick(() => {
            router.back()
          }).visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)

        Text(this.rightTxt === '' ? '' : this.rightTxt)
          .height('20vp')
          .margin({ right: 20 })
          .fontSize('16fp')
          .fontColor($r('app.color.color_white'))
          .visibility(this.rightTxt === '' ? Visibility.None : Visibility.Visible)
          .onClick(()=>{
            this.onRightTxtClick();
          })

        Image(this.rightImg === undefined ? null : this.rightImg)
          .width('20vp')
          .height('20vp')
          .margin({ right: 20 })
          .visibility(this.rightImg === undefined ? Visibility.None : Visibility.Visible)
          .onClick(()=>{
            this.onRightImgClick();
          })
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('60vp')
    .backgroundColor($r('app.color.colorPrimary'))
  }
}

细心的读者会发现我设置返回按钮隐藏是用的Visibility.Hidden，需要用Hdden,隐藏的时候会有占位，使用None的话会使布局错乱。

4.调用代码

TitleBar({ title: '事件上报',rightImg: $r('app.media.icon_zanc_list'),onRightImgClick:()=>{
        showToast('点击了图标')
      }})

TitleBar({isShow:false,title:'任务中心',rightTxt:'积分规则',onRightTxtClick:()=>{
		showToast('点击了积分规则')
      }})
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK