网站建设 蜀美网络,网站建设营销方案,阿里巴巴网站是怎么做的,网站建设炎陵hm_common_title_bar
OpenHarmony三方库中心仓#xff1a;https://ohpm.openharmony.cn/#/cn/detail/common_title_bar
介绍
一款通用标题栏#xff0c;支持高度自定义#xff0c;可设置沉浸式状态#xff0c;正常状态下为#xff1a;左侧返回、居中标题#xff0c;左…hm_common_title_bar
OpenHarmony三方库中心仓https://ohpm.openharmony.cn/#/cn/detail/common_title_bar
介绍
一款通用标题栏支持高度自定义可设置沉浸式状态正常状态下为左侧返回、居中标题左中右均可自定义视图。
软件架构
Harmony next版本兼容API12
效果图 安装教程
ohpm install common_title_bar
使用说明
引入仓库设置全局属性状态栏高度、是否全面屏、标题栏高度、标题栏颜色等可忽略使用默认配置
基础使用
import { CommonTitleBar, TitleType } from ohos/commonTitleBar
import { promptAction } from kit.ArkUI;Component
export struct TitlePage {/*** rightType: TitleType.IMAGE时设置了rightMorePopupData: this.rightMorePopup* 则会显示气泡菜单弹窗如微信扫一扫弹窗*/State rightMorePopup: MenuItemOptions[] [{startIcon: $r(app.media.ic_edit),content: 编辑资料,}, {startIcon: $r(app.media.ic_download),content: 上传信息,}, {startIcon: $r(app.media.ic_upload),content: 下载信息,}, {startIcon: $r(app.media.ic_scan),content: 扫一扫,}]/*** 左侧自定义视图*/BuilderleftBuilder() {Row() {Image($r(app.media.ic_arrow_left)).height(20)Text(返回).onClick(() {promptAction.showToast({message: 点击了左侧自定义视图,duration: 1500,})})}}/*** 右侧自定义视图*/BuilderrightBuilder() {Row() {Text(更多).onClick(() {promptAction.showToast({message: 点击了右侧自定义视图,duration: 1500,})})Image($r(app.media.ic_more)).height(20)}}/*** 居中自定义视图*/BuildercenterBuilder() {Row() {Image($r(app.media.ic_arrow_left)).height(20)Text(居中).onClick(() {promptAction.showToast({message: 点击了居中自定义视图,duration: 1500,})})Image($r(app.media.ic_more)).height(20)}}build() {NavDestination() {Scroll() {Column() {CommonTitleBar({leftType: TitleType.NONE,centerType: TitleType.TEXT,centerText: 通用标题栏,})CommonTitleBar({isFullScreen: false,leftType: TitleType.TEXT,leftText: 返回,centerType: TitleType.TEXT,centerText: 非全面屏左右文字,rightType: TitleType.TEXT,rightText: 更多,})/*** 左侧返回右侧更多气泡菜单*/CommonTitleBar({isFullScreen: false,centerType: TitleType.TEXT,centerText: 左侧返回右侧更多,rightType: TitleType.IMAGE,rightMorePopupData: this.rightMorePopup,rightOnClick: (menu, index) {promptAction.showToast({message: menu?.content --- index,duration: 1500,})}})CommonTitleBar({isFullScreen: false,centerType: TitleType.TEXT,centerText: 自定义点击事件,centerOnClick: (): void {promptAction.showToast({message: 居中自定义事件,duration: 1500,})},leftOnClick: () {promptAction.showToast({message: 左侧自定义事件,duration: 1500,})},rightType: TitleType.TEXT,rightText: 更多,rightOnClick: () {promptAction.showToast({message: 右侧自定义事件,duration: 1500,})}})/*** 自定义视图*/CommonTitleBar({isFullScreen: false,leftType: TitleType.CUSTOM,leftCustomView: this.leftBuilder,centerType: TitleType.CUSTOM,centerCustomView: this.centerBuilder,rightType: TitleType.CUSTOM,rightCustomView: this.rightBuilder})/*** 跑马灯效果*/CommonTitleBar({isFullScreen: false,leftWidth: 80,leftType: TitleType.TEXT,leftText: 超长文本时开启跑马灯效果,centerWidth: 150,centerText: 超长文本时开启跑马灯效果超长文本时开启跑马灯效果超长文本时开启跑马灯效果,rightWidth: 80,rightType: TitleType.TEXT,rightText: 超长文本时开启跑马灯效果,rightTextOverflow: TextOverflow.Ellipsis})/*** 中间搜索框*/CommonTitleBar({isFullScreen: false,leftType: TitleType.NONE,centerType: TitleType.SEARCH,searchValue: 关键字,searchPlaceholder: 请输入产品名称,searchButtonText: 搜索,searchButtonOptions: {fontSize: 14,fontColor: Color.Red},onChangeSearch: (value) {console.log(Search: value)},onSubmitSearch: (value) {promptAction.showToast({message: value,duration: 1500,})}})/*** 中间搜索框 左侧返回 右侧更多*/CommonTitleBar({isFullScreen: false,rightType: TitleType.IMAGE,rightMorePopupData: this.rightMorePopup,rightOnClick: (menu, index) {promptAction.showToast({message: menu?.content --- index,duration: 1500,})},centerLeftPadding: 50,centerRightPadding: 50,centerType: TitleType.SEARCH,searchPlaceholder: 请输入产品名称,searchButtonText: 搜索,searchButtonOptions: {fontSize: 14,fontColor: Color.Red},onChangeSearch: (value) {console.log(Search: value)},onSubmitSearch: (value) {promptAction.showToast({message: value,duration: 1500,})}})/*** 基础属性设置*/CommonTitleBar({centerText: 基础属性设置,isFullScreen: true,statusBarHeight: 50,statusBarColor: Color.Blue,titleBarHeight: 56,titleBarColor: Color.Green,showBottomLine: true,bottomLineColor: Color.Red,bottomLineSize: 5,})}}}.hideTitleBar(true)}
}视图类型
export enum TitleType {NONE none, // 空白TEXT text, // 文字IMAGE image, // 图标CUSTOM custom, // 自定义SEARCH search, // 居中搜索框
}左侧返回方式
/*** 返回方式* 使用POP、POP_TO_NAME、POP_TO_INDEX、CLEAR需要在MainPage主页面设置Provide(appPathStack) appPathStack: NavPathStack new NavPathStack();* MainPage为其他使用CommonTitleBar子组件的主组件* 如果使用以下方式自定义左侧图图标点击事件onClickLeftImage即可*/
export enum BackType {NONE none, // 无点击事件ROUTER router, // router.back() 返回到上一页POP pop, // NavPathStack.pop() 返回到上一页默认方式POP_TO_NAME popToName, // NavPathStack.popToName(name) 返回到上一个name页面POP_TO_INDEX popToIndex, // NavPathStack.popToIndex(1) 返回到索引为1的页面CLEAR clear, // NavPathStack.clear() 返回到根首页清除栈中所有页面
}CommonTitleBar属性介绍
属性默认值说明主体设置isFullScreenbooleantrue是否是全面沉浸是屏statusBarHeightLength36状态栏高度全面沉浸式屏生效titleBarHeightLength56标题栏高度titleBarColorResourceColor‘#f5f5f5’标题栏颜色statusBarColorResourceColor‘#f5f5f5’状态栏颜色 默认 等于标题栏颜色showBottomLinebooleantrue是否显示标题栏底部的分割线bottomLineSizeLength1标题栏底部的分割线的宽度bottomLineColorResourceColor“#DDDDDD”标题栏分割线颜色左侧设置leftTypestringTitleType.IMAGE左侧视图类型默认显示返回按钮leftWidthLength-1左侧视图宽度不设置则自适应内容leftLeftPaddingLength15左侧视图左内间距leftRightPaddingLength5左侧视图右内间距leftTextResourceStr‘Left’左侧文字leftType text 有效leftTextColorResourceColor“#000000”左侧文字颜色leftTextSizeLength16左侧文字大小leftTextOverflowTextOverflowTextOverflow.MARQUEE左侧文本超长时的显示方式默认跑马灯效果leftImageResourceResourceStrPixelMap返回图标leftImageWidthLength26左侧图标宽度leftImageHeightLength26左侧图标高度leftImagePaddingLength5左侧图标padding值图标尺寸16内间距各5保证点击范围onClickTypeLeftImagestringBackType.POP返回方法不设置leftOnClick的情况下生效leftPopToNamestring‘’BackType.POP_TO_NAME下生效NavPathStack.popToName(“name”) 方式的页面名称leftPopToIndexnumber0BackType.POP_TO_INDEX下生效NavPathStack.popToIndex(1) 返回到索引为1的页面leftCustomViewBuilder左侧自定义视图leftOnClick() void左侧点击事件右侧设置rightTypestringTitleType.NONE右侧视图类型默认无视图rightWidthLength-1右侧宽度不设置则自适应内容rightLeftPaddingLength5右侧视图左内间距rightRightPaddingLength15右侧视图右内间距rightTextResourceStr‘Right’右侧文字leftType text 有效rightTextColorResourceColor“#000000”右侧文字颜色rightTextSizeLength16右侧文字大小rightTextOverflowTextOverflowTextOverflow.MARQUEE右侧文本超长时的显示方式默认跑马灯效果rightImageResourceResourceStrPixelMap更多图标rightMorePopupViewBuilder更多-气泡菜单如果默认使用更多图标可默认展示气泡菜单rightMorePopupDataMenuItemOptions[][]气泡菜单数据列表rightImageWidthLength26右侧图标宽度rightImageHeightLength26右侧图标高度rightImagePaddingLength5右侧图标padding值图标尺寸16内间距各5保证点击范围rightCustomViewBuilder右侧自定义视图rightOnClick(item?: MenuItemOptions, index?: number) void右侧点击事件居中设置centerTypestringTitleType.TEXT居中视图类型默认文字视图centerWidthLength-1居中宽度不设置则自适应内容centerTextResourceStr‘Center’居中文字leftType text 有效centerTextColorResourceColor“#000000”居中文字颜色centerTextSizeLength16居中文字大小centerTextOverflowTextOverflow TextOverflow.MARQUEE居中文本超长时的显示方式默认跑马灯效果centerOnClick() void居中文字点击事件centerImageResourceResourceStrPixelMap无centerImageWidthLength26居中图标宽度centerImageHeightLength26居中图标高度centerImagePaddingLength5居中图标padding值图标尺寸16内间距各5保证点击范围centerCustomViewBuilder无居中自定义视图searchValuestring‘’centerType TitleType.SEARCH生效居中搜索框文本searchPlaceholderResourceStr‘请输入关键字’居中搜索框提示文本searchButtonTextstring‘搜索’设置搜索框末尾搜索按钮文本searchButtonOptionsSearchButtonOptions无设置搜索框末尾搜索按钮文本样式onSubmitSearch(value: string) void点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调onChangeSearch(value: string) void输入内容发生变化时触发该回调centerLeftPaddingLength30居中视图左内间距centerRightPaddingLenght30居中视图右间距
CommonTitleBar全局属性设置统一设置整个项目均可生效一般位于EntryAbility.ets中设置
/*** 设置通用标题栏的全局属性* 主体设置*/AppStorage.setOrCreateboolean(TitleGlobalAttribute.IS_FULL_SCREEN, true); // 全局设置是否是全面屏AppStorage.setOrCreatenumber(TitleGlobalAttribute.STATUS_BAR_HEIGHT, px2vp(area.topRect.height)); // 全局设置状态栏高度AppStorage.setOrCreatenumber(TitleGlobalAttribute.TITLE_BAR_HEIGHT, 56); // 全局设置标题栏高度AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.TITLE_BAR_COLOR, #f5f5f5); // 全局设置标题栏颜色AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.STATUS_BAR_COLOR, #f5f5f5); // 全局设置状态栏颜色AppStorage.setOrCreateboolean(TitleGlobalAttribute.SHOW_BOTTOM_LINE, true); // 全局设置是否显示标题栏底部的分割线AppStorage.setOrCreateLength(TitleGlobalAttribute.BOTTOM_LINE_SIZE, 1); // 全局设置标题栏底部的分割线的宽度AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.BOTTOM_LINE_COLOR, #DDDDDD); // 全局设置标题栏分割线颜色/*** 左侧设置*/AppStorage.setOrCreatestring(TitleGlobalAttribute.LEFT_TYPE, TitleType.IMAGE); // 全局设置左侧视图类型AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_LEFT_PADDING, 15); // 全局设置左侧视图左内间距AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_RIGHT_PADDING, 5); // 全局设置左侧视图右内间距AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.LEFT_TEXT_COLOR, #000000); // 全局设置左侧文字颜色AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_TEXT_SIZE, 16); // 全局设置左侧文字大小AppStorage.setOrCreateResourceStr | PixelMap(TitleGlobalAttribute.LEFT_IMAGE_RESOURCE,$r(app.media.ic_arrow_left)); // 全局设置左侧图标AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_IMAGE_WIDTH, 26); // 全局设置左侧图标宽度AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_IMAGE_HEIGHT, 26); // 全局设置左侧图标高度AppStorage.setOrCreateLength(TitleGlobalAttribute.LEFT_IMAGE_PADDING, 5); // 全局设置左侧图标padding/*** 右侧设置*/AppStorage.setOrCreatestring(TitleGlobalAttribute.RIGHT_TYPE, TitleType.NONE); // 全局设置右侧视图类型AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_LEFT_PADDING, 5); // 全局设置右侧视图左内间距AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_RIGHT_PADDING, 15); // 全局设置右侧视图右内间距AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.RIGHT_TEXT_COLOR, #000000); // 全局设置右侧文字颜色AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_TEXT_SIZE, 16); // 全局设置右侧文字大小AppStorage.setOrCreateResourceStr | PixelMap(TitleGlobalAttribute.RIGHT_IMAGE_RESOURCE,$r(app.media.ic_more)); // 全局设置左侧图标AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_IMAGE_WIDTH, 26); // 全局设置右侧图标宽度AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_IMAGE_HEIGHT, 26); // 全局设置右侧图标高度AppStorage.setOrCreateLength(TitleGlobalAttribute.RIGHT_IMAGE_PADDING, 5); // 全局设置右侧图标padding/*** 居中设置*/AppStorage.setOrCreatestring(TitleGlobalAttribute.CENTER_TYPE, TitleType.TEXT); // 全局设置居中视图类型AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_LEFT_PADDING, 30); // 全局设置居中视图左内间距AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_RIGHT_PADDING, 30); // 全局设置居中视图右内间距AppStorage.setOrCreateResourceColor(TitleGlobalAttribute.CENTER_TEXT_COLOR, #000000); // 全局设置居中文字颜色AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_TEXT_SIZE, 16); // 全局设置居中文字大小AppStorage.setOrCreateResourceStr | PixelMap(TitleGlobalAttribute.CENTER_IMAGE_RESOURCE,); // 全局设置居中图标AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_IMAGE_WIDTH, 26); // 全局设置居中图标宽度AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_IMAGE_HEIGHT, 26); // 全局设置居中图标高度AppStorage.setOrCreateLength(TitleGlobalAttribute.CENTER_IMAGE_PADDING, 5); // 全局设置居中图标padding
