1、封装
在pages文件夹下新建文件夹Components 创建Header.ets
@Component
export struct TitleBar {
@Link model: TitleBar.Model;
@BuilderParam customLeftView?: () => any = undefined;
@BuilderParam customCenterView?: () => any = undefined;
@BuilderParam customRightView?: () => any = undefined;
private multipleTitleSwiperController: SwiperController = new SwiperController();
private multipleTitleDataSource: TitleBar.MultipleTitleDataSource = new TitleBar.MultipleTitleDataSource(this.model.multipleTitleList);
/**
* 标题栏两边普通布局
* @param type
*/
@Builder normalBothSidesLayout(type: TitleBar.BothSidesLayoutType) {
Row() {
// 图标在上方 文字在下方
if (this.model.leftIconGravity == TitleBar.IconGravity.TOP) {
Column({
space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
}) {
if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
|| (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
.objectFit(ImageFit.Auto)
.width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
.height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
.padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
}
Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
.maxLines(1)
.fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
.fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
.fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
}
}
// 图标在下方 文字在上方
else if (this.model.leftIconGravity == TitleBar.IconGravity.BOTTOM) {
Column({
space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
}) {
Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
.maxLines(1)
.fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
.fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
.fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
|| (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
.objectFit(ImageFit.Auto)
.width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
.height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
.padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
}
}
}
// 图标在左方 文字在右方
else if (this.model.leftIconGravity == TitleBar.IconGravity.LEFT) {
Row({
space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
}) {
if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
|| (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
.objectFit(ImageFit.Auto)
.width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
.height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
.padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
}
Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
.maxLines(1)
.fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
.fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
.fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
}
}
// 图标右方 文字在左方
else if (this.model.leftIconGravity == TitleBar.IconGravity.RIGHT) {
Row({
space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
}) {
Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
.maxLines(1)
.fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
.fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
.fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
|| (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
.objectFit(ImageFit.Auto)
.width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
.height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
.padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
}
}
}
}
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.constraintSize({
minWidth: this.model.titleBarMinHeight,
minHeight: this.model.titleBarMinHeight,
})
.padding(this.model.titleBarNormalPadding)
.stateStyles({
normal: {
.backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStateNormalStyleColor : this.model.rightTitleStateNormalStyleColor)
},
pressed: {
.backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStatePressedStyleColor : this.model.rightTitleStatePressedStyleColor)
}
})
.onClick(() => {
type == TitleBar.BothSidesLayoutType.LEFT ? this.model.onLeftClickListener() : this.model.onRightClickListener();
})
}
/**
* 标题布局
*/
@Builder normalCenterLayout() {
Column({ space: this.model.titleSpace }) {
// 主标题
// 跑马灯
if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
Marquee({
start: true,
src: this.model.titleName
})
.fontSize(this.model.titleFontSize)
.fontColor(this.model.titleFontColor)
.fontWeight(this.model.titleFontWeight)
}
// 垂直跑马灯多文本动态显示效果
else if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MULTIPLE) {
Swiper(this.multipleTitleSwiperController) {
LazyForEach(this.multipleTitleDataSource, (item: string) => {
Text(item)
.maxLines(1)
.textAlign(this.model.multipleTitleTextAlign)
.fontSize(this.model.multipleTitleFontSize)
.fontColor(this.model.multipleTitleFontColor)
.fontWeight(this.model.multipleTitleFontWeight)
.textOverflow({ overflow: this.textOverflowConvert(this.model.multipleTitleTextOverflowType) })
.fontStyle(this.model.multipleTitleTextStyle)
.width('100%')
}, item => item)
}
.autoPlay(true)
.interval(this.model.multipleTitlePlayInterval)
.indicator(false)
.loop(true)
.duration(this.model.multipleTitlePlayDuration)
.itemSpace(this.model.multipleTitlePlayItemSpace)
.vertical(true)
.curve(Curve.Linear)
}
// 普通文本
else {
Text(this.model.titleName)
.maxLines(1)
.fontSize(this.model.titleFontSize)
.fontColor(this.model.titleFontColor)
.fontWeight(this.model.titleFontWeight)
.textOverflow({ overflow: this.textOverflowConvert(this.model.titleTextOverflowType) })
.fontStyle(this.model.titleTextStyle)
}
// 副标题
if (this.model.subTitleName.length != 0) {
if (this.model.subTitleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
Marquee({
start: true,
src: this.model.subTitleName
})
.fontSize(this.model.subTitleFontSize)
.fontColor(this.model.subTitleFontColor)
.fontWeight(this.model.subTitleFontWeight)
} else {
Text(this.model.subTitleName)
.maxLines(1)
.fontSize(this.model.subTitleFontSize)
.fontColor(this.model.subTitleFontColor)
.fontWeight(this.model.subTitleFontWeight)
.textOverflow({ overflow: this.textOverflowConvert(this.model.subTitleTextOverflowType) })
.fontStyle(this.model.subTitleTextStyle)
}
}
}
.padding(this.model.titleBarNormalPadding)
.layoutWeight(1)
.onClick(() => {
this.model.onTitleClickListener();
})
}
@Builder blankLayout() {
Row() {
Blank()
}
.constraintSize({
minWidth: this.model.titleBarMinHeight,
minHeight: this.model.titleBarMinHeight,
})
}
textOverflowConvert(type: TitleBar.TitleTextOverflowType): TextOverflow {
if (type == TitleBar.TitleTextOverflowType.NONE) {
return TextOverflow.None;
} else if (type == TitleBar.TitleTextOverflowType.CLIP) {
return TextOverflow.Clip;
} else if (type == TitleBar.TitleTextOverflowType.ELLIPSIS) {
return TextOverflow.Ellipsis;
} else {
return TextOverflow.None;
}
}
aboutToAppear() {
this.model.showLeftSideLayout = !(this.model.leftTitleName.length == 0 && this.model.leftIcon == null);
this.model.showRightSideLayout = !(this.model.rightTitleName.length == 0 && this.model.rightIcon == null);
}
build() {
Row() {
// 左边布局
if (this.customLeftView) {
this.customLeftView()
} else {
if (this.model.showLeftSideLayout) {
this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.LEFT)
} else {
this.blankLayout()
}
}
// 中间布局
if (this.customCenterView) {
this.customCenterView()
} else {
this.normalCenterLayout()
}
// 右边布局
if (this.customRightView) {
this.customRightView()
} else {
if (this.model.showRightSideLayout) {
this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.RIGHT)
} else {
this.blankLayout()
}
}
}
.alignItems(VerticalAlign.Center)
.backgroundColor(this.model.titleBarBackground)
.width('100%')
.constraintSize({
minHeight: this.model.titleBarMinHeight,
})
.border({
width: {
bottom: this.model.titleBarBottomLineHeight
},
color: {
bottom: this.model.titleBarBottomLineColor
}
})
.linearGradient(this.model.titleBarLinearGradient)
}
}
export namespace TitleBar {
/**
* 标题栏样式
*/
export enum BarStyle {
// 日间主题样式
LIGHT = 1,
// 夜间主题样式
NIGHT = 2,
// 透明主题样式实现
TRANSPARENT = 3,
// 渐变色样式实现
LINEARGRADIENT = 4,
}
/**
* 标题文本超长时处理显示策略
*/
export enum TitleTextOverflowType {
// 文本超长时不进行裁剪。
NONE = 0,
// 文本超长时显示不下的文本用省略号代替。
ELLIPSIS = 1,
// 文本超长时进行裁剪显示。
CLIP = 2,
// 文本超长时跑马灯显示
MARQUEE = 3,
// 垂直跑马灯多文本动态显示效果
MULTIPLE = 4,
}
/**
* 左右两边的操作布局类型 左 右
*/
export enum BothSidesLayoutType {
LEFT = 1,
RIGHT = 2,
}
/**
* 左右图标位置 上 下 左 右
*/
export enum IconGravity {
TOP = 1,
BOTTOM = 2,
LEFT = 3,
RIGHT = 4,
}
export class Model {
// 标题栏 Padding
titleBarNormalPadding: number | Resource = 5;
// 标题栏最小高度
titleBarMinHeight: number | Resource = 55;
// 标题栏样式
titleBarStyle: BarStyle = BarStyle.LIGHT;
// 标题栏背景色
titleBarBackground: ResourceColor = Color.White;
// 标题栏底部线条颜色
titleBarBottomLineColor: ResourceColor = 0xFFECECEC;
// 标题栏底部线条高度
titleBarBottomLineHeight: number | Resource = 0.35;
// 标题栏渐变色
titleBarLinearGradient: any = null;
/***************************************************************
* 中间标题
***************************************************************/
// 布局项间距
titleSpace: string | number = 2;
// 标题名称
titleName: string = "";
// 标题颜色
titleFontColor: ResourceColor = Color.Black;
// 标题大小
titleFontSize: number | string | Resource = 18;
// 标题文字粗细
titleFontWeight: number | FontWeight | string = FontWeight.Normal;
// 标题文本超长时处理显示策略
titleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
// 字体样式设置 Normal 标准 Italic 斜体
titleTextStyle: FontStyle = FontStyle.Normal;
// 子标题名称
subTitleName: string = "";
// 子标题颜色
subTitleFontColor: ResourceColor = Color.Black;
// 子标题大小
subTitleFontSize: number | string | Resource = 12;
// 子标题文字粗细
subTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
// 子标题文本超长时处理显示策略
subTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
// 子标题字体样式设置 Normal 标准 Italic 斜体
subTitleTextStyle: FontStyle = FontStyle.Normal;
// 标题栏点击回调
onTitleClickListener: () => void = () => {
};
/***************************************************************
* 垂直跑马灯多文本动态显示效果
***************************************************************/
multipleTitleList: string[] = [''];
// 垂直跑马灯多文本动态显示标题颜色
multipleTitleFontColor: ResourceColor = Color.Black;
// 垂直跑马灯多文本动态显示标题大小
multipleTitleFontSize: number | string | Resource = 18;
// 垂直跑马灯多文本动态显示标题文字粗细
multipleTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
// 垂直跑马灯多文本动态显示标题文本超长时处理显示策略
multipleTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
// 垂直跑马灯多文本动态显示字体样式设置 Normal 标准 Italic 斜体
multipleTitleTextStyle: FontStyle = FontStyle.Normal;
// 垂直跑马灯多文本动态显示文字显示位置
multipleTitleTextAlign: TextAlign = TextAlign.Start;
// 垂直跑马灯多文本动态显示文字播放 Interval 间隔
multipleTitlePlayInterval: number = 2000;
// 垂直跑马灯多文本动态显示文字播放 Duration
multipleTitlePlayDuration: number = 2000;
// 垂直跑马灯多文本动态显示文字播放 ItemSpace
multipleTitlePlayItemSpace: number = 5;
/***************************************************************
* 左边按钮
***************************************************************/
// 左边布局项间距
leftTitleSpace: string | number = 2;
// 左边标题多态样式 Normal
leftTitleStateNormalStyleColor: ResourceColor = Color.White;
// 左边标题多态样式 Pressed
leftTitleStatePressedStyleColor: ResourceColor = Color.Grey;
// 显示左边布局
showLeftSideLayout: boolean = true;
// 左边背景色
leftTitleBackground: ResourceColor = Color.White;
// 左边按钮标题名称
leftTitleName: string = "";
// 左边按钮标题颜色
leftTitleFontColor: ResourceColor = Color.Black;
// 左边按钮标题文字大小
leftTitleFontSize: number | string | Resource = 16;
// 左边按钮标题文字粗细
leftTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
// 左边按钮图标
leftIcon: string | PixelMap | Resource = $r('app.media.left_back_black');
// 左边按钮图标宽度
leftIconWidth: number | string | Resource = 20;
// 左边按钮图标高度
leftIconHeight: number | string | Resource = 20;
// 左边按钮图标 Padding
leftIconPadding: Padding | Length = 0;
// 左边按钮图标位置
leftIconGravity: IconGravity = IconGravity.LEFT;
// 左边点击回调
onLeftClickListener: () => void = () => {
};
/***************************************************************
* 右边按钮
***************************************************************/
// 右边布局项间距
rightTitleSpace: string | number = 2;
// 右边标题多态样式 Normal
rightTitleStateNormalStyleColor: ResourceColor = Color.White;
// 右边标题多态样式 Pressed
rightTitleStatePressedStyleColor: ResourceColor = Color.Grey;
// 显示右边布局
showRightSideLayout: boolean = true;
// 右边背景色
rightTitleBackground: ResourceColor = Color.White;
// 右边按钮标题名称
rightTitleName: string = "";
// 右边按钮标题颜色
rightTitleFontColor: ResourceColor = Color.Black;
// 右边按钮标题文字大小
rightTitleFontSize: number | string | Resource = 16;
// 右边按钮标题文字粗细
rightTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
// 右边按钮图标
rightIcon: string | PixelMap | Resource = null;
// 右边按钮图标宽度
rightIconWidth: number | string | Resource = 20;
// 右边按钮图标高度
rightIconHeight: number | string | Resource = 20;
// 右边按钮图标 Padding
rightIconPadding: Padding | Length = 0;
// 右边按钮图标位置
rightIconGravity: IconGravity = IconGravity.LEFT;
// 右边点击回调
onRightClickListener: () => void = () => {
};
constructor() {
this.barStyleTransform(BarStyle.LIGHT);
}
setTitleBarNormalPadding(value: number | Resource): Model {
this.titleBarNormalPadding = value;
return this;
}
setTitleBarMinHeight(value: number | Resource): Model {
this.titleBarMinHeight = value;
return this;
}
setTitleBarStyle(value: BarStyle): Model {
this.titleBarStyle = value;
this.barStyleTransform(value);
return this;
}
setTitleBarBackground(value: ResourceColor): Model {
this.titleBarBackground = value;
return this;
}
setTitleBarBottomLineHeight(value: number | Resource): Model {
this.titleBarBottomLineHeight = value;
return this;
}
setTitleBarBottomLineColor(value: ResourceColor): Model {
this.titleBarBottomLineColor = value;
return this;
}
setShowTitleBarBottomLine(value: boolean): Model {
this.titleBarBottomLineHeight = value ? 0.35 : 0;
return this;
}
setTitleBarLinearGradient(value: any): Model {
this.titleBarLinearGradient = value;
return this;
}
/***************************************************************
* 中间标题
***************************************************************/
setTitleSpace(value: string | number): Model {
this.titleSpace = value;
return this;
}
setTitleName(value: string): Model {
this.titleName = value;
return this;
}
setTitleFontColor(value: ResourceColor): Model {
this.titleFontColor = value;
return this;
}
setTitleFontSize(value: number | string | Resource): Model {
this.titleFontSize = value;
return this;
}
setTitleFontWeight(value: number | FontWeight | string): Model {
this.titleFontWeight = value;
return this;
}
setTitleTextOverflowType(value: TitleTextOverflowType): Model {
this.titleTextOverflowType = value;
return this;
}
setTitleTextStyle(value: FontStyle): Model {
this.titleTextStyle = value;
return this;
}
setSubTitleName(value: string): Model {
this.subTitleName = value;
return this;
}
setSubTitleFontColor(value: ResourceColor): Model {
this.subTitleFontColor = value;
return this;
}
setSubTitleFontSize(value: number | string | Resource): Model {
this.subTitleFontSize = value;
return this;
}
setSubTitleFontWeight(value: number | FontWeight | string): Model {
this.subTitleFontWeight = value;
return this;
}
setSubTitleTextOverflowType(value: TitleTextOverflowType): Model {
this.subTitleTextOverflowType = value;
return this;
}
setSubTitleTextStyle(value: FontStyle): Model {
this.subTitleTextStyle = value;
return this;
}
setOnTitleClickListener(callback: () => void): Model {
this.onTitleClickListener = callback
return this
}
/***************************************************************
* 垂直跑马灯多文本动态显示效果
***************************************************************/
setMultipleTitleList(value: string[]): Model {
this.multipleTitleList = value;
return this;
}
setMultipleTitleFontColor(value: ResourceColor): Model {
this.multipleTitleFontColor = value;
return this;
}
setMultipleTitleFontSize(value: number | string | Resource): Model {
this.multipleTitleFontSize = value;
return this;
}
setMultipleTitleFontWeight(value: number | FontWeight | string): Model {
this.multipleTitleFontWeight = value;
return this;
}
setMultipleTitleTextOverflowType(value: TitleTextOverflowType): Model {
this.multipleTitleTextOverflowType = value;
return this;
}
setMultipleTitleTextStyle(value: FontStyle): Model {
this.multipleTitleTextStyle = value;
return this;
}
setMultipleTitleTextAlign(value: TextAlign): Model {
this.multipleTitleTextAlign = value;
return this;
}
setMultipleTitlePlayInterval(value: number): Model {
this.multipleTitlePlayInterval = value;
return this;
}
setMultipleTitlePlayDuration(value: number): Model {
this.multipleTitlePlayDuration = value;
return this;
}
setMultipleTitlePlayItemSpace(value: number): Model {
this.multipleTitlePlayItemSpace = value;
return this;
}
/***************************************************************
* 左边按钮
***************************************************************/
setLeftTitleStateNormalStyleColor(value: ResourceColor): Model {
this.leftTitleStateNormalStyleColor = value;
return this;
}
setLeftTitleStatePressedStyleColor(value: ResourceColor): Model {
this.leftTitleStatePressedStyleColor = value;
return this;
}
setLeftTitleSpace(value: string | number): Model {
this.leftTitleSpace = value;
return this;
}
setShowLeftSideLayout(value: boolean): Model {
this.showLeftSideLayout = value;
return this;
}
setLeftTitleName(value: string): Model {
this.leftTitleName = value;
return this;
}
setLeftTitleFontColor(value: ResourceColor): Model {
this.leftTitleFontColor = value;
return this;
}
setLeftTitleFontSize(value: number | string | Resource): Model {
this.leftTitleFontSize = value;
return this;
}
setLeftTitleFontWeight(value: number | FontWeight | string): Model {
this.leftTitleFontWeight = value;
return this;
}
setLeftIcon(value: string | PixelMap | Resource): Model {
this.leftIcon = value;
return this;
}
setLeftIconWidth(value: number | string | Resource): Model {
this.leftIconWidth = value;
return this;
}
setLeftIconHeight(value: number | string | Resource): Model {
this.leftIconHeight = value;
return this;
}
setLeftIconPadding(value: Padding | Length): Model {
this.leftIconPadding = value;
return this;
}
setLeftIconGravity(value: IconGravity): Model {
this.leftIconGravity = value;
return this;
}
setOnLeftClickListener(callback: () => void): Model {
this.onLeftClickListener = callback
return this
}
setLeftTitleBackground(value: ResourceColor): Model {
this.leftTitleBackground = value;
return this;
}
/***************************************************************
* 右边按钮
***************************************************************/
setRightTitleStateNormalStyleColor(value: ResourceColor): Model {
this.rightTitleStateNormalStyleColor = value;
return this;
}
setRightTitleStatePressedStyleColor(value: ResourceColor): Model {
this.rightTitleStatePressedStyleColor = value;
return this;
}
setRightTitleSpace(value: string | number): Model {
this.rightTitleSpace = value;
return this;
}
setShowRightSideLayout(value: boolean): Model {
this.showRightSideLayout = value;
return this;
}
setRightTitleName(value: string): Model {
this.rightTitleName = value;
return this;
}
setRightTitleFontColor(value: ResourceColor): Model {
this.rightTitleFontColor = value;
return this;
}
setRightTitleFontSize(value: number | string | Resource): Model {
this.rightTitleFontSize = value;
return this;
}
setRightTitleFontWeight(value: number | FontWeight | string): Model {
this.rightTitleFontWeight = value;
return this;
}
setRightIcon(value: string | PixelMap | Resource): Model {
this.rightIcon = value;
return this;
}
setRightIconWidth(value: number | string | Resource): Model {
this.rightIconWidth = value;
return this;
}
setRightIconHeight(value: number | string | Resource): Model {
this.rightIconHeight = value;
return this;
}
setRightIconPadding(value: Padding | Length): Model {
this.rightIconPadding = value;
return this;
}
setRightIconGravity(value: IconGravity): Model {
this.rightIconGravity = value;
return this;
}
setOnRightClickListener(callback: () => void): Model {
this.onRightClickListener = callback
return this
}
setRightTitleBackground(value: ResourceColor): Model {
this.rightTitleBackground = value;
return this;
}
/**
* 标题样式转换
* @param value
*/
private barStyleTransform(value: BarStyle) {
switch (value) {
case TitleBar.BarStyle.LIGHT:
this.setTitleBarBackground(0xFFFFFFFF);
this.setTitleFontColor(0xFF222222);
this.setLeftTitleStateNormalStyleColor(0xFFFFFFFF);
this.setLeftTitleStatePressedStyleColor(0x0C000000);
this.setLeftIcon($r('app.media.left_back_black'));
this.setLeftTitleFontColor(0xFF666666);
this.setRightTitleStateNormalStyleColor(0xFFFFFFFF);
this.setRightTitleStatePressedStyleColor(0x0C000000);
this.setRightTitleFontColor(0xFFA4A4A4);
break;
case TitleBar.BarStyle.NIGHT:
this.setTitleBarBackground(0xFF000000);
this.setTitleFontColor(0xEEFFFFFF);
this.setLeftTitleStateNormalStyleColor(0x00000000);
this.setLeftTitleStatePressedStyleColor(0x66FFFFFF);
this.setLeftIcon($r('app.media.left_back_white'));
this.setLeftTitleFontColor(0xCCFFFFFF);
this.setRightTitleStateNormalStyleColor(0x00000000);
this.setRightTitleStatePressedStyleColor(0x66FFFFFF);
this.setRightTitleFontColor(0xCCFFFFFF);
break;
case TitleBar.BarStyle.TRANSPARENT:
this.setTitleBarBackground(Color.Transparent);
this.setTitleFontColor(0xFFFFFFFF);
this.setLeftTitleStateNormalStyleColor(Color.Transparent);
this.setLeftTitleStatePressedStyleColor(0x22000000);
this.setLeftIcon(null);
this.setLeftTitleFontColor(0xFFFFFFFF);
this.setRightTitleStateNormalStyleColor(Color.Transparent);
this.setRightTitleStatePressedStyleColor(0x22000000);
this.setRightTitleFontColor(0xFFFFFFFF);
break;
case TitleBar.BarStyle.LINEARGRADIENT:
this.setTitleBarBackground(Color.Transparent);
this.setTitleFontColor(0xFFFFFFFF);
this.setLeftTitleStateNormalStyleColor(Color.Transparent);
this.setLeftTitleStatePressedStyleColor(0x22000000);
this.setLeftIcon(null);
this.setLeftTitleFontColor(0xFFFFFFFF);
this.setRightTitleStateNormalStyleColor(Color.Transparent);
this.setRightTitleStatePressedStyleColor(0x22000000);
this.setRightTitleFontColor(0xFFFFFFFF);
break;
default:
break;
}
}
}
export class MultipleTitleDataSource implements IDataSource {
private multipleTitleList: string[] = [];
private listener: DataChangeListener;
constructor(list: string[]) {
this.multipleTitleList = list;
}
totalCount(): number {
return this.multipleTitleList.length;
}
getData(index: number): any {
return this.multipleTitleList[index];
}
registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener;
}
unregisterDataChangeListener() {
this.listener = null;
}
}
}
export default TitleBar
2、使用
import { TitleBar } from '../Components/Header'
@State model1: TitleBar.Model = new TitleBar.Model()
.setOnLeftClickListener(() => {
router.back()
})
.setLeftTitleName("返回")
.setTitleName("咨询订单")
build() {
TitleBar({ model: $model1 })
}
3、效果
部分内容转载:TitleBar: 🔥🔥👍TitleBar是基于ArkTS封装的HarmonyOS通用、功能全面的自定义标题栏框架。