【鸿蒙】基于ArkTS基础组件封装的标题栏(TitleBar)组件

最新推荐文章于 2024-09-24 14:29:01 发布

鸿蒙系统小能手Mr.Li

最新推荐文章于 2024-09-24 14:29:01 发布

阅读量1.2k

点赞数 3

分类专栏： HarmonyOS open Harmony 文章标签：鸿蒙开发华为 harmonyos ArTS基础组件 TitleBar

本文链接：https://blog.csdn.net/2401_82772199/article/details/136344522

版权

本文介绍了基于 ArkTS 的 TitleBar 组件封装，提供了下载安装、使用说明，并推荐了《鸿蒙（Harmony OS）开发学习手册》作为学习资源，涵盖鸿蒙系统的基础概念、 ArkTS 开发指南等。

摘要由CSDN通过智能技术生成

简介

TitleBar 是基于 ArkTS 封装的通用、功能全面的自定义标题栏框架。

在这里插入图片描述

下载安装

ohpm install @smarthane/titlebar

使用说明

1.引入文件及代码依赖

   import {
    TitleBar } from '@smarthane/titlebar'

2.使用步骤说明

  （1） 创建model
   @State model: TitleBar.Model = new TitleBar.Model()
  （2） 创建TitleBar
   TitleBar({
    model: $model })

3.使用示例
详细可以参考工程entry模块下面的示例代码。

import {
    TitleBar } from '@smarthane/titlebar'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct Index {
   
 private scroller: Scroller = new Scroller()
 @State model1: TitleBar.Model = new TitleBar.Model()
   .setOnLeftClickListener(() => {
   
     promptAction.showToast({
   
       message: "点击了左边返回按钮",
       duration: 2000
     })
   })
   .setTitleName("默认标题栏")
 @State model2: TitleBar.Model = new TitleBar.Model()
   .setLeftIcon(null)
   .setTitleTextStyle(FontStyle.Italic)
   .setTitleName("不带返回按钮并且标题为斜体")
 @State model3: TitleBar.Model = new TitleBar.Model()
   .setTitleTextOverflowType(TitleBar.TitleTextOverflowType.MARQUEE)
   .setTitleName("标题栏文字过长跑马灯效果，标题栏文字过长跑马灯效果。")
   .setTitleFontColor(Color.Green)
 @State model4: TitleBar.Model = new TitleBar.Model()
   .setTitleName("主标题主标题文本超长时显示不下的文本用省略号代替")
   .setSubTitleName("副标题文本超长时显示不下的文本用省略号代替")
 @State model5: TitleBar.Model = new TitleBar.Model()
   .setTitleName("主副标题文字过长跑马灯效果。主副标题文字过长跑马灯效果。")
   .setTitleTextOverflowType(TitleBar.TitleTextOverflowType.MARQUEE)
   .setSubTitleName("副标题副标题副标题副标题副标题副标题副标题")
   .setSubTitleTextOverflowType(TitleBar.TitleTextOverflowType.MARQUEE)
 @State model6: TitleBar.Model = new TitleBar.Model()
   .setTitleName("主标题不动，副标题文字过长跑马灯效果。")
   .setSubTitleName("副标题副标题副标题副标题副标题副标题副标题")
   .setSubTitleFontColor(Color.Orange)
   .setSubTitleTextOverflowType(TitleBar.TitleTextOverflowType.MARQUEE)
 @State model7: TitleBar.Model = new TitleBar.Model()
   .setLeftTitleName("返回")
   .setTitleName("返回按钮文字")
 @State model8: TitleBar.Model = new TitleBar.Model()
   .setTitleName("标题标题标题")
   .setRightIcon($r("app.media.more_black"))
 @State model9: TitleBar.Model = new TitleBar.Model()
   .setLeftTitleName("扫描")
   .setLeftIcon($r("app.media.scan_black"))
   .setLeftIconGravity(TitleBar.IconGravity.TOP)
   .setLeftIconWidth(35)
   .setLeftIconHeight(35)
   .setLeftTitleFontSize(10)
   .setLeftTitleFontColor(Color.Blue)
   .setRightTitleName("打印")
   .setRightIcon($r("app.media.print_black"))
   .setRightIconGravity(TitleBar.IconGravity.TOP)
   .setRightIconWidth(35)
   .setRightIconHeight(35)
   .setRightTitleFontSize(10)
   .setTitleName("主标题可设置大小和颜色")
   .setTitleFontColor(Color.Red)
   .setOnLeftClickListener(() => {
   
     promptAction.showToast({
   
       message: "扫描",
       duration: 2000
     })
   })
   .setOnRightClickListener(() => {
   
     promptAction.showToast({
   
       message: "打印",
       duration: 2000
     })
   })
 @State model10: TitleBar.Model = new TitleBar.Model()
   .setTitleName("标题栏可以点击")
   .setOnTitleClickListener(() => {
   
     promptAction.showToast({
   
       message: "点击了标题栏",
       duration: 2000
     })
   })
 @State model11: TitleBar.Model = new TitleBar.Model()
   .setTitleName("自定义布局右边")
   .setOnTitleClickListener(() => {
   
     promptAction.showToast({
   
       message: "点击了标题栏",