鸿蒙5.0开发进阶：UI框架-ArkTS组件（SubHeader）

原创 于 2025-02-08 15:21:16 发布 · 666 阅读 · 27 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

SubHeader

子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容。也可以用于内容项顶部，子标题名称用来概括该区块内容。

说明

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { SubHeader } from '@kit.ArkUI'

子组件

无

属性

支持通用属性。

说明

不支持设置文本相关。

SubHeader

SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>, operationSymbolOptions?: Array<SymbolOptions>})

装饰器类型：@Component

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称参数类型必填装饰器类型说明
iconResourceStr否@Prop

图标设置项。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

iconSymbolOptions12+SymbolOptions否-

icon为Symbol资源时的设置项。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

primaryTitleResourceStr否@Prop

标题内容。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

secondaryTitleResourceStr否@Prop

副标题内容。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

selectSelectOptions否-

select内容以及事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

operationTypeOperationType否@Prop

操作区(右侧)元素样式。

默认值：OperationType.BUTTON

元服务API： 从API version 11开始，该接口支持在元服务中使用。

operationItemArray<OperationOption>否-

操作区（右侧）的设置项。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

operationSymbolOptions12+Array<SymbolOptions>否-

operationType为OperationType.ICON_GROUP，

operationItem设置多个图标，图标为Symbol资源时的设置项。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

primaryTitleModifier12+TextModifier否-

设置标题文本属性，如设置标题颜色、字体大小、字重等。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

secondaryTitleModifier12+TextModifier否-

设置副标题文本属性，如设置标题颜色、字体大小、字重等。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

titleBuilder12+() => void否@BuildParam

自定义标题区内容

元服务API： 从API version 12开始，该接口支持在元服务中使用。

contentMargin12+LocalizedMargin否@Prop

子标题外边距，不支持设置负数。

默认值：

{start: LengthMetrics.resource(

$r('sys.float.margin_left')),

end: LengthMetrics.resource(

$r('sys.float.margin_right'))}

元服务API： 从API version 12开始，该接口支持在元服务中使用。

contentPadding12+LocalizedPadding否@Prop

子标题内边距。

默认值：

左侧为副标题或副标题加图标时：

{start: LengthMetrics.vp(12), end: LengthMetrics.vp(12)}。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

OperationType

元服务API： 从API version 11开始，该接口支持在元服务中使用。

名称值说明
TEXT_ARROW0文本按钮（带右箭头）。
BUTTON1文本按钮（不带右箭头）。
ICON_GROUP2图标按钮（最多支持配置三张图标）。
LOADING3加载动画。

SelectOptions

元服务API： 从API version 11开始，该接口支持在元服务中使用。

名称类型必填说明
optionsArray<SelectOption>是下拉选项内容。
selectednumber否

设置下拉菜单初始选项的索引。

第一项的索引为0。

当不设置selected属性时，

默认选择值为-1，菜单项不选中。

valuestring否设置下拉按钮本身的文本内容。
onSelect(index: number, value?: string) => void否

下拉菜单选中某一项的回调。

- index：选中项的索引。

- value：选中项的值。

OperationOption

元服务API： 从API version 11开始，该接口支持在元服务中使用。

名称类型必填说明
valueResourceStr是文本内容。
action()=>void否事件。

SymbolOptions12+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型必填说明
fontColorResourceStr否

设置Symbol资源颜色。

默认值：不同渲染策略下默认值不同。

fontSizenumber |string |Resource否

设置Symbol资源大小。

默认值：系统默认值。

fontWeightFontWeight|number |string否

设置Symbol资源粗细。

number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。

string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。

默认值：FontWeight.Normal。

renderingStrategySymbolRenderingStrategy否

设置Symbol资源渲染策略。

默认值：SymbolRenderingStrategy.SINGLE。

说明：

$r('sys.symbol.ohos_*')中引用的资源仅ohos_trash_circle、ohos_folder_badge_plus、ohos_lungs支持分层与多色模式。

effectStrategySymbolEffectStrategy否

设置Symbol资源动效策略。

默认值：SymbolEffectStrategy.NONE。

说明：

$r('sys.symbol.ohos_*')中引用的资源仅ohos_wifi支持层级动效模式。

事件

支持通用事件

示例

示例1（效率型子标题）

该示例主要演示子标题左侧为icon、secondaryTitle，右侧operationType为按钮类型。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        icon: $r('sys.media.ohos_ic_public_email'),
        secondaryTitle: '二级标题',
        operationType: OperationType.BUTTON,
        operationItem: [{
          value: '操作',
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }]
      })
    }
  }
}

示例2（双行文本内容型子标题）

该示例主要演示子标题左侧为primaryTitle、secondaryTitle，右侧operationType类型为TEXT_ARROW。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        primaryTitle: '一级标题',
        secondaryTitle: '二级标题',
        operationType: OperationType.TEXT_ARROW,
        operationItem: [{
          value: '更多',
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }]
      })
    }
  }
}

示例3（spinner型内容型子标题）

该示例主要演示子标题左侧为select，右侧operationType类型为ICON_GROUP。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        // 左侧为select选择器
        select: {
          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
          value: 'selectDemo',
          selected: 2,
          onSelect: () => {
            promptAction.showToast({ message: 'demo' });
          }
        },
        operationType: OperationType.ICON_GROUP,
        // 右侧为三个icon图标
        operationItem: [{
          value: $r('sys.media.ohos_ic_public_email'),
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }, {
          value: $r('sys.media.ohos_ic_public_email'),
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }, {
          value: $r('sys.media.ohos_ic_public_email'),
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }]
      })
    }
  }
}

示例4（设置左侧symbol图标）

该示例主要演示子标题左侧icon设置symbol图标。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        // 设置icon为symbol图标
        icon: $r('sys.symbol.ohos_wifi'),
        iconSymbolOptions: {
          effectStrategy: SymbolEffectStrategy.HIERARCHICAL,
        },
        secondaryTitle: '标题',
        operationType: OperationType.BUTTON,
        operationItem: [{
          value: '操作',
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }]
      })
    }
  }
}

示例5（设置右侧symbol图标）

该示例主要演示子标题operationType设置为OperationType.ICON_GROUP，operationItem的value设置为symbol图标。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        // 设置左侧select
        select: {
          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
          value: 'selectDemo',
          selected: 2,
          onSelect: () => {
            promptAction.showToast({ message: 'demo' });
          }
        },
        operationType: OperationType.ICON_GROUP,
        // 设置右侧icon
        operationItem: [{
          value: $r('sys.symbol.ohos_lungs'),
          action: () => {
            promptAction.showToast({ message: 'icon1' });
          }
        }, {
          value: $r('sys.symbol.ohos_lungs'),
          action: () => {
            promptAction.showToast({ message: 'icon2' });
          }
        }, {
          value: $r('sys.symbol.ohos_lungs'),
          action: () => {
            promptAction.showToast({ message: 'icon3' });
          }
        }],
        // 设置右侧icon图标symbol样式
        operationSymbolOptions: [{
          fontWeight: FontWeight.Lighter,
        }, {
          renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR,
          fontColor: [Color.Blue, Color.Grey, Color.Green],
        }, {
          renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY,
          fontColor: [Color.Blue, Color.Grey, Color.Green],
        }]
      })
    }
  }
}

示例6（自定义标题内容）

该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。

import { promptAction, OperationType, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  // 自定义左侧标题
  @Builder
  TitleBuilder(): void {
    Text('自定义标题')
      .fontSize(24)
      .fontColor(Color.Blue)
      .fontWeight(FontWeight.Bold)
  }

  build() {
    Column() {
      SubHeader({
        // 调用TitleBuilder
        titleBuilder: () => {
          this.TitleBuilder();
        },
        primaryTitle: '一级标题',
        secondaryTitle: '二级标题',
        icon: $r('sys.symbol.ohos_star'),
        operationType: OperationType.TEXT_ARROW,
        operationItem: [{
          value: '更多信息',
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }]
      })
    }
  }
}

示例7（自定义标题样式）

该示例主要演示SubHeader设置标题和副标题字体样式以及标题内外边距的效果。

import { promptAction, OperationType, SubHeader, LengthMetrics, TextModifier } from '@kit.ArkUI';

@Entry
@Component
struct SubHeaderExample {
  // 设置主副标题文本颜色
  @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);
  @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);

  build() {
    Column() {
      SubHeader({
        primaryTitle: 'primaryTitle',
        secondaryTitle: 'secondaryTitle',
        primaryTitleModifier: this.primaryModifier,
        secondaryTitleModifier: this.secondaryModifier,
        operationType: OperationType.TEXT_ARROW,
        operationItem: [{
          value: '更多信息',
          action: () => {
            promptAction.showToast({ message: 'demo' });
          }
        }],
        // 标题内外间距
        contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) },
        contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }
      })
    }
  }
}

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值