OpenHarmony开发者论坛

标题: 基于ArkTS基础组件封装的标题栏(TitleBar)组件 [打印本页]

作者: smarthane 时间: 2023-12-25 11:14
标题: 基于ArkTS基础组件封装的标题栏(TitleBar)组件
[md][https://gitee.com/smarthane/titlebar]()

## 简介

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

![operation.gif](https://forums-obs.openharmony.c ... 6c66yy6fabap68d.gif "operation.gif")

## 下载安装

```
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: "点击了标题栏",
   duration: 2000
   })
})
@State model12: TitleBar.Model = new TitleBar.Model()
.setTitleName("自定义布局标题栏")
.setRightIcon($r('app.media.more_black'))
@State model13: TitleBar.Model = new TitleBar.Model()
.setTitleName("自定义布局左边")
@State model14: TitleBar.Model = new TitleBar.Model()
.setTitleBarStyle(TitleBar.BarStyle.NIGHT)
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setOnLeftClickListener(() => {
   promptAction.showToast({
   message: "点击了左边返回按钮",
   duration: 2000
   })
})
.setTitleName("夜间模式标题栏")
@State model15: TitleBar.Model = new TitleBar.Model()
.setTitleBarStyle(TitleBar.BarStyle.LIGHT)
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setOnLeftClickListener(() => {
   promptAction.showToast({
   message: "点击了左边返回按钮",
   duration: 2000
   })
})
.setTitleName("白天模式标题栏")
@State model16: TitleBar.Model = new TitleBar.Model()
.setLeftIcon(null)
.setLeftTitleName("返回")
.setRightIcon(null)
.setRightTitleName("设置")
.setTitleName("没有左右图标的标题栏")
@State model17: TitleBar.Model = new TitleBar.Model()
.setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setOnLeftClickListener(() => {
   promptAction.showToast({
   message: "点击了左边返回按钮",
   duration: 2000
   })
})
.setTitleName("透明标题栏")
@State model18: TitleBar.Model = new TitleBar.Model()
.setTitleBarStyle(TitleBar.BarStyle.LINEARGRADIENT)
.setTitleBarLinearGradient({
   angle: 90,
   colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setOnLeftClickListener(() => {
   promptAction.showToast({
   message: "点击了左边返回按钮",
   duration: 2000
   })
})
.setTitleName("渐变颜色标题栏")
@State model19: TitleBar.Model = new TitleBar.Model()
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setTitleBarBottomLineHeight(0.5)
.setTitleBarBottomLineColor(Color.Red)
.setOnLeftClickListener(() => {
   promptAction.showToast({
   message: "点击了左边返回按钮",
   duration: 2000
   })
})
.setTitleName("设置底部横线")
@State model20: TitleBar.Model = new TitleBar.Model()
.setLeftTitleName("返回")
.setRightTitleName("设置")
.setTitleName("隐藏底部横线")
.setShowTitleBarBottomLine(false)
@State model21: TitleBar.Model = new TitleBar.Model()
.setTitleBarStyle(TitleBar.BarStyle.LINEARGRADIENT)
.setTitleBarLinearGradient({
   angle: 180,
   colors: [[0x26c4fd, 0.0], [0x387cfd, 1.0]]
})
.setLeftTitleName("返回")
.setRightTitleName("确认")
.setRightTitleFontColor(Color.Red)
.setTitleName("仿QQ渐变颜色标题栏")

@Builder customRightView() {
Row({ space: 5 }) {
   Column({ space: 2 }) {
   Image($r('app.media.scan_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("扫描").fontSize(10)
   }

   Column({ space: 2 }) {
   Image($r('app.media.print_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("打印").fontSize(10)
   }

   Column({ space: 2 }) {
   Image($r('app.media.scan_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("333").fontSize(10)
   }
}
.padding(5)
}

@Builder customCenterView() {
Row({ space: 5 }) {
   Column({ space: 2 }) {
   Image($r('app.media.scan_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("111").fontSize(10)
   }

   Column({ space: 2 }) {
   Image($r('app.media.print_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("222").fontSize(10)
   }

   Column({ space: 2 }) {
   Image($r('app.media.scan_black'))
      .objectFit(ImageFit.Auto)
      .width(30)
      .height(30)
   Text("333").fontSize(10)
   }
}
.justifyContent(FlexAlign.Center)
.padding(5)
.layoutWeight(1)
}

build() {
Stack({ alignContent: Alignment.TopStart }) {
   Scroll(this.scroller) {
   Flex({ direction: FlexDirection.Column }) {
      TitleBar({ model: $model1 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model2 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model3 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model4 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model5 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model6 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model7 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model8 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model9 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model10 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({
         model: $model11,
         customRightView: () => {
         this.customRightView()
         }
      })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({
         model: $model12,
         customCenterView: () => {
         this.customCenterView()
         }
      })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({
         model: $model13,
         customLeftView: () => {
         this.customRightView()
         }
      })
      TitleBar({ model: $model14 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model15 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model16 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model17 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model18 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model21 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model19 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
      TitleBar({ model: $model20 })
      Divider().strokeWidth(10).color(0xFFF1F0F0)
   }
   }
   .scrollable(ScrollDirection.Vertical)
   .scrollBar(BarState.Off)
   .edgeEffect(EdgeEffect.Spring)
}
.width('100%')
.height('100%')
.backgroundColor(0xFFF1F0F0)
}
}
```

## 接口说明

```
@State TitleBar.Model = new TitleBar.Model();

// 标题栏 Padding
this.model.setTitleBarNormalPadding();
// 标题栏最小高度
this.model.setTitleBarMinHeight();
// 标题栏样式
this.model.setTitleBarStyle();
// 标题栏背景色
this.model.setTitleBarBackground();
// 标题栏底部线条颜色
this.model.setTitleBarBottomLineColor();
// 标题栏底部线条高度
this.model.setTitleBarBottomLineHeight();
// 标题栏渐变色
this.model.setTitleBarLinearGradient();
/***************************************************************
* 中间标题
***************************************************************/
// 布局项间距
this.model.setTitleSpace();
// 标题名称
this.model.setTitleName();
// 标题颜色
this.model.setTitleFontColor();
// 标题大小
this.model.setTitleFontSize();
// 标题文字粗细
this.model.setTitleFontWeight();
// 标题文本超长时处理显示策略
this.model.setTitleTextOverflowType();
// 字体样式设置 Normal 标准 Italic 斜体
this.model.setTitleTextStyle();
// 子标题名称
this.model.setSubTitleName();
// 子标题颜色
this.model.setSubTitleFontColor();
// 子标题大小
this.model.setSubTitleFontSize();
// 子标题文字粗细
this.model.setSubTitleFontWeight();
// 子标题文本超长时处理显示策略
this.model.setSubTitleTextOverflowType();
// 子标题字体样式设置 Normal 标准 Italic 斜体
this.model.setSubTitleTextStyle();
// 标题栏点击回调
this.setOnTitleClickListener: () => void = () => {
};

/***************************************************************
* 左边按钮
***************************************************************/
// 左边布局项间距
this.model.setLeftTitleSpace();
// 左边标题多态样式 Normal
this.model.setLeftTitleStateNormalStyleColor();
// 左边标题多态样式 Pressed
this.model.setLeftTitleStatePressedStyleColor();
// 显示左边布局
this.model.setShowLeftSideLayout();
// 左边背景色
this.model.setLeftTitleBackground();

// 左边按钮标题名称
this.model.setLeftTitleName();
// 左边按钮标题颜色
this.model.setLeftTitleFontColor();
// 左边按钮标题文字大小
this.model.setLeftTitleFontSize();
// 左边按钮标题文字粗细
this.model.setLeftTitleFontWeight();

// 左边按钮图标
this.model.setLeftIcon();
// 左边按钮图标宽度
this.model.setLeftIconWidth();
// 左边按钮图标高度
this.model.setLeftIconHeight();
// 左边按钮图标 Padding
this.model.setLeftIconPadding();
// 左边按钮图标位置
this.model.setLeftIconGravity();

// 左边点击回调
setOnLeftClickListener: () => void = () => {
};
/***************************************************************
* 右边按钮
***************************************************************/
// 右边布局项间距
this.model.setRightTitleSpace();
// 右边标题多态样式 Normal
this.model.setRightTitleStateNormalStyleColor();
// 右边标题多态样式 Pressed
this.model.setRightTitleStatePressedStyleColor();
// 显示右边布局
this.model.setShowRightSideLayout();
// 右边背景色
this.model.setRightTitleBackground();

// 右边按钮标题名称
this.model.setRightTitleName();
// 右边按钮标题颜色
this.model.setRightTitleFontColor();
// 右边按钮标题文字大小
this.model.setRightTitleFontSize();
// 右边按钮标题文字粗细
this.model.setRightTitleFontWeight();

// 右边按钮图标
this.model.setRightIcon();
// 右边按钮图标宽度
this.model.setRightIconWidth();
// 右边按钮图标高度
this.model.setRightIconHeight();
// 右边按钮图标 Padding
this.model.setRightIconPadding();
// 右边按钮图标位置
this.model.setRightIconGravity();

// 右边点击回调
setOnRightClickListener: () => void = () => {
};
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)