Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。

23 阅读 0 评论 0 点赞

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: "扫一扫",
  }
  ]

  /**
   * 左侧自定义视图
   */
  @Builder
  leftBuilder() {
    Row() {
      Image($r('app.media.ic_arrow_left'))
        .height(20)
      Text('返回')
        .onClick(() => {
          promptAction.showToast({
            message: "点击了左侧自定义视图",
            duration: 1500,
          })
        })
    }
  }

  /**
   * 右侧自定义视图
   */
  @Builder
  rightBuilder() {
    Row() {
      Text('更多')
        .onClick(() => {
          promptAction.showToast({
            message: "点击了右侧自定义视图",
            duration: 1500,
          })
        })
      Image($r('app.media.ic_more'))
        .height(20)
    }
  }

  /**
   * 居中自定义视图
   */
  @Builder
  centerBuilder() {
    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属性介绍：

属性	默认值	说明
主体设置
isFullScreen	boolean：true	是否是全面沉浸是屏
statusBarHeight	Length：36	状态栏高度（全面沉浸式屏生效）
titleBarHeight	Length：56	标题栏高度
titleBarColor	ResourceColor：‘#f5f5f5’	标题栏颜色
statusBarColor	ResourceColor：‘#f5f5f5’	状态栏颜色默认等于标题栏颜色
showBottomLine	boolean：true	是否显示标题栏底部的分割线
bottomLineSize	Length：1	标题栏底部的分割线的宽度
bottomLineColor	ResourceColor：“#DDDDDD”	标题栏分割线颜色
左侧设置
leftType	string：TitleType.IMAGE	左侧视图类型，默认显示返回按钮
leftWidth	Length：-1	左侧视图宽度，不设置则自适应内容
leftLeftPadding	Length：15	左侧视图左内间距
leftRightPadding	Length：5	左侧视图右内间距
leftText	ResourceStr：‘Left’	左侧文字leftType = text 有效
leftTextColor	ResourceColor：“#000000”	左侧文字颜色
leftTextSize	Length：16	左侧文字大小
leftTextOverflow	TextOverflow：TextOverflow.MARQUEE	左侧文本，超长时的显示方式，默认跑马灯效果；
leftImageResource	ResourceStr	PixelMap：返回图标
leftImageWidth	Length：26	左侧图标宽度
leftImageHeight	Length：26	左侧图标高度
leftImagePadding	Length：5	左侧图标padding值：图标尺寸16，内间距各5，保证点击范围
onClickTypeLeftImage	string：BackType.POP	返回方法，不设置leftOnClick的情况下生效
leftPopToName	string：‘’	BackType.POP_TO_NAME下生效：NavPathStack.popToName(“name”) 方式的页面名称
leftPopToIndex	number：0	BackType.POP_TO_INDEX下生效：NavPathStack.popToIndex(1) 返回到索引为1的页面
leftCustomView	@Builder：	左侧自定义视图
leftOnClick	() => void	左侧点击事件
右侧设置
rightType	string：TitleType.NONE	右侧视图类型，默认无视图
rightWidth	Length：-1	右侧宽度，不设置则自适应内容
rightLeftPadding	Length：5	右侧视图左内间距
rightRightPadding	Length：15	右侧视图右内间距
rightText	ResourceStr：‘Right’	右侧文字leftType = text 有效
rightTextColor	ResourceColor：“#000000”	右侧文字颜色
rightTextSize	Length：16	右侧文字大小
rightTextOverflow	TextOverflow：TextOverflow.MARQUEE	右侧文本，超长时的显示方式，默认跑马灯效果
rightImageResource	ResourceStr	PixelMap：更多图标
rightMorePopupView	@Builder：更多-气泡菜单	如果默认使用更多图标，可默认展示气泡菜单
rightMorePopupData	MenuItemOptions[]：[]	气泡菜单数据列表
rightImageWidth	Length：26	右侧图标宽度
rightImageHeight	Length：26	右侧图标高度
rightImagePadding	Length：5	右侧图标padding值：图标尺寸16，内间距各5，保证点击范围
rightCustomView	@Builder：	右侧自定义视图
rightOnClick	(item?: MenuItemOptions, index?: number) => void	右侧点击事件
居中设置
centerType	string：TitleType.TEXT	居中视图类型，默认文字视图
centerWidth	Length：-1	居中宽度，不设置则自适应内容
centerText	ResourceStr：‘Center’	居中文字leftType= text 有效
centerTextColor	ResourceColor：“#000000”	居中文字颜色
centerTextSize	Length：16	居中文字大小
centerTextOverflow	TextOverflow： TextOverflow.MARQUEE	居中文本，超长时的显示方式，默认跑马灯效果
centerOnClick	() => void	居中文字点击事件
centerImageResource	ResourceStr	PixelMap：无
centerImageWidth	Length：26	居中图标宽度
centerImageHeight	Length：26	居中图标高度
centerImagePadding	Length：5	居中图标padding值：图标尺寸16，内间距各5，保证点击范围
centerCustomView	@Builder：无	居中自定义视图
searchValue	string：‘’	centerType = TitleType.SEARCH生效：居中搜索框文本
searchPlaceholder	ResourceStr：‘请输入关键字’	居中搜索框提示文本
searchButtonText	string：‘搜索’	设置搜索框末尾搜索按钮文本
searchButtonOptions	SearchButtonOptions：无	设置搜索框末尾搜索按钮文本样式
onSubmitSearch	(value: string) => void	点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调
onChangeSearch	(value: string) => void	输入内容发生变化时，触发该回调
centerLeftPadding	Length：30	居中视图左内间距
centerRightPadding	Lenght：30	居中视图右间距

CommonTitleBar全局属性设置：统一设置，整个项目均可生效，一般位于EntryAbility.ets中设置：

/**
       * 设置通用标题栏的全局属性
       * 主体设置
       */
      AppStorage.setOrCreate<boolean>(TitleGlobalAttribute.IS_FULL_SCREEN, true); // 全局设置是否是全面屏
      AppStorage.setOrCreate<number>(TitleGlobalAttribute.STATUS_BAR_HEIGHT, px2vp(area.topRect.height)); // 全局设置状态栏高度
      AppStorage.setOrCreate<number>(TitleGlobalAttribute.TITLE_BAR_HEIGHT, 56); // 全局设置标题栏高度
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.TITLE_BAR_COLOR, "#f5f5f5"); // 全局设置标题栏颜色
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.STATUS_BAR_COLOR, "#f5f5f5"); // 全局设置状态栏颜色
      AppStorage.setOrCreate<boolean>(TitleGlobalAttribute.SHOW_BOTTOM_LINE, true); // 全局设置是否显示标题栏底部的分割线
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.BOTTOM_LINE_SIZE, 1); // 全局设置标题栏底部的分割线的宽度
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.BOTTOM_LINE_COLOR, "#DDDDDD"); // 全局设置标题栏分割线颜色

      /**
       * 左侧设置
       */
      AppStorage.setOrCreate<string>(TitleGlobalAttribute.LEFT_TYPE, TitleType.IMAGE); // 全局设置左侧视图类型
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_LEFT_PADDING, 15); // 全局设置左侧视图左内间距
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_RIGHT_PADDING, 5); // 全局设置左侧视图右内间距
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.LEFT_TEXT_COLOR, "#000000"); // 全局设置左侧文字颜色
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_TEXT_SIZE, 16); // 全局设置左侧文字大小
      AppStorage.setOrCreate<ResourceStr | PixelMap>(TitleGlobalAttribute.LEFT_IMAGE_RESOURCE,
        $r('app.media.ic_arrow_left')); // 全局设置左侧图标
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_IMAGE_WIDTH, 26); // 全局设置左侧图标宽度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_IMAGE_HEIGHT, 26); // 全局设置左侧图标高度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.LEFT_IMAGE_PADDING, 5); // 全局设置左侧图标padding

      /**
       * 右侧设置
       */
      AppStorage.setOrCreate<string>(TitleGlobalAttribute.RIGHT_TYPE, TitleType.NONE); // 全局设置右侧视图类型
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_LEFT_PADDING, 5); // 全局设置右侧视图左内间距
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_RIGHT_PADDING, 15); // 全局设置右侧视图右内间距
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.RIGHT_TEXT_COLOR, "#000000"); // 全局设置右侧文字颜色
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_TEXT_SIZE, 16); // 全局设置右侧文字大小
      AppStorage.setOrCreate<ResourceStr | PixelMap>(TitleGlobalAttribute.RIGHT_IMAGE_RESOURCE,
        $r('app.media.ic_more')); // 全局设置左侧图标
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_IMAGE_WIDTH, 26); //  全局设置右侧图标宽度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_IMAGE_HEIGHT, 26); // 全局设置右侧图标高度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.RIGHT_IMAGE_PADDING, 5); // 全局设置右侧图标padding

      /**
       * 居中设置
       */
      AppStorage.setOrCreate<string>(TitleGlobalAttribute.CENTER_TYPE, TitleType.TEXT); // 全局设置居中视图类型
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_LEFT_PADDING, 30); // 全局设置居中视图左内间距
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_RIGHT_PADDING, 30); // 全局设置居中视图右内间距
      AppStorage.setOrCreate<ResourceColor>(TitleGlobalAttribute.CENTER_TEXT_COLOR, "#000000"); // 全局设置居中文字颜色
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_TEXT_SIZE, 16); // 全局设置居中文字大小
      AppStorage.setOrCreate<ResourceStr | PixelMap>(TitleGlobalAttribute.CENTER_IMAGE_RESOURCE,''); // 全局设置居中图标
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_IMAGE_WIDTH, 26); //  全局设置居中图标宽度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_IMAGE_HEIGHT, 26); // 全局设置居中图标高度
      AppStorage.setOrCreate<Length>(TitleGlobalAttribute.CENTER_IMAGE_PADDING, 5); // 全局设置居中图标padding

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。

点赞(0) 打赏

本文分类：文章资讯
本文标签：Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。
浏览次数：23 次浏览
本文链接：https://freeymw.com/article/18936.html

上一篇 > 最佳实践之直接操作跨域 iframe 的 DOM
下一篇 > 大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略

评论列表共有 0 条评论

暂无评论

Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。

hm_common_title_bar

介绍

软件架构

效果图

安装教程

使用说明

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复