EditableTitleBar

The editable title bar is a title bar that comes with button icons, typically Cancel on the left and Confirm on the right, on a multi-select or editing page.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import { EditableTitleBar } from '@kit.ArkUI'

Child Components

Not supported

Attributes

The universal attributes are not supported.

EditableTitleBar

EditableTitleBar({leftIconStyle: EditableLeftIconType, imageItem?: EditableTitleBarItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, isSaveIconRequired: boolean, onSave?: () => void, onCancel?: () =>void, options: EditableTitleBarOptions, contentMargin?: LocalizedMargin})

Decorator: @Component

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Decorator	Description
leftIconStyle	EditableLeftIconType	Yes	-	Type of the icon on the left. Default value: EditableLeftIconType.Back Atomic service API: This API can be used in atomic services since API version 11.
imageItem12+	EditableTitleBarItem	No	-	A single menu item for the profile picture on the left. Default value: undefined Atomic service API: This API can be used in atomic services since API version 12.
title	ResourceStr	Yes	-	Title. Default value: '', indicating that the title is empty Atomic service API: This API can be used in atomic services since API version 11.
subtitle12+	ResourceStr	No	-	Subtitle. Default value: '', indicating that the subtitle is empty Atomic service API: This API can be used in atomic services since API version 12.
menuItems	Array<EditableTitleBarMenuItem>	No	-	List of menu items on the right. Default value: undefined Atomic service API: This API can be used in atomic services since API version 11.
isSaveIconRequired12+	boolean	Yes	-	Whether the save button on the right is required. Default value: true, indicating that the save button on the right is required. NOTE If not decorated by @Require, this parameter is not subject to mandatory validation during construction. Atomic service API: This API can be used in atomic services since API version 12.
onSave	() => void	No	-	Callback invoked when the Save icon is clicked. Default value: () => void Atomic service API: This API can be used in atomic services since API version 11.
onCancel	() => void	No	-	Callback that is triggered when the cancel action is performed with the left Cancel icon. Default value: () => void Since API version 12: Callback that is triggered when the back action is performed with the left Back icon. Atomic service API: This API can be used in atomic services since API version 11.
options12+	EditableTitleBarOptions	Yes	-	Title style. Default value: { safeAreaTypes: [SafeAreaType.SYSTEM], safeAreaEdges: [SafeAreaEdge.TOP], backgroundColor: '#00000000' } NOTE If not decorated by @Require, this parameter is not subject to mandatory validation during construction. Atomic service API: This API can be used in atomic services since API version 12.
contentMargin12+	LocalizedMargin	No	@Prop	Margin of the content. Negative numbers are not supported. Default value: {start: LengthMetrics.resource($r('sys.float.margin_left')), end: LengthMetrics.resource($r('sys.float.margin_right'))} Atomic service API: This API can be used in atomic services since API version 12.
leftIconDefaultFocus18+	boolean	No	-	Whether the left icon is the default focus. Default value: false Atomic service API: This API can be used in atomic services since API version 18.
saveIconDefaultFocus18+	boolean	No	-	Whether the save icon is the default focus. Default value: false Atomic service API: This API can be used in atomic services since API version 18.

NOTE

The input parameter cannot be undefined, that is, calling EditableTitleBar(undefined) is not allowed. If multiple operable areas are set as default focus, the first one in the display order that is set as the default focus will be the default focus.

EditableLeftIconType

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
Back	0	Back.
Cancel	1	Cancel.

EditableTitleBarMenuItem

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
value	ResourceStr	Yes	Icon resource. Atomic service API: This API can be used in atomic services since API version 11.
symbolStyle18+	SymbolGlyphModifier	No	Symbol icon resource, which has higher priority than value. Atomic service API: This API can be used in atomic services since API version 18.
label12+	ResourceStr	No	Icon label. Atomic service API: This API can be used in atomic services since API version 12.
isEnabled	boolean	No	Whether to enable the item. Default value: true true: The item is enabled. false: The item is disabled. Atomic service API: This API can be used in atomic services since API version 11.
action	() => void	No	Action to perform. Atomic service API: This API can be used in atomic services since API version 11.
accessibilityLevel18+	string	No	Accessibility level. It determines whether the component can be recognized by accessibility services. The options are as follows: "auto": It is treated as "yes" by the system. "yes": The component can be recognized by accessibility services. "no": The component cannot be recognized by accessibility services. "no-hide-descendants": Neither the component nor its child components can be recognized by accessibility services. Default value: "auto" Atomic service API: This API can be used in atomic services since API version 18.
accessibilityText18+	ResourceStr	No	Accessibility text, that is, accessible label name. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected. Default value: value of the label property if it is set and an empty string otherwise. Atomic service API: This API can be used in atomic services since API version 18.
accessibilityDescription18+	ResourceStr	No	Accessible description. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected. Default value: "Double-tap to activate" Atomic service API: This API can be used in atomic services since API version 18.
defaultFocus18+	boolean	No	Whether to set the item as the default focus. true: Set the item as the default focus. false: Do not set the item as the default focus. Default value: false Atomic service API: This API can be used in atomic services since API version 18.

EditableTitleBarItem¹²⁺

type EditableTitleBarItem = EditableTitleBarMenuItem

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
EditableTitleBarMenuItem	A single menu item for the profile picture on the left.

EditableTitleBarOptions¹²⁺

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
backgroundColor	ResourceColor	No	Background color of the title bar. Default value: '#00000000'
backgroundBlurStyle	BlurStyle	No	Background blur style of the title bar. Default value: [BlurStyle.NONE]
safeAreaTypes	Array <SafeAreaType>	No	Types of the expanded safe areas. Default value: [SafeAreaType.SYSTEM]
safeAreaEdges	Array <SafeAreaEdge>	No	Edges for expanding the safe area. Default value: [SafeAreaEdge.TOP]

Events

The universal events are not supported.

Example

Example 1: Implementing an Editable Title Bar with a Custom Right Icon

This example demonstrates how to implement an editable title bar with a left icon, main title, and custom right icon area.

import { EditableLeftIconType, EditableTitleBar, promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Divider().height(2).color(0xCCCCCC)
        // Cancel button on the left and save button on the right.
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Cancel,
          title: 'Edit',
          menuItems: [],
          onCancel: () => {
            promptAction.showToast({ message: 'on cancel' });
          },
          onSave: () => {
            promptAction.showToast({ message: 'on save' });
          }
        })
        Divider().height(2).color(0xCCCCCC)
        // Back button on the left, and custom cancel (disabled) and save buttons on the right.
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Edit',
          menuItems: [
            {
              value: $r('sys.media.ohos_ic_public_cancel'),
              isEnabled: false,
              action: () => {
                promptAction.showToast({ message: 'show toast index 2' });
              }
            }
          ],
          onSave: () => {
            promptAction.showToast({ message: 'on save' })
          }
        })
        Divider().height(2).color(0xCCCCCC)
      }.width('100%')
    }.height('100%')
  }
}

Example 2: Implementing an Editable Title Bar with Background Blur and a Profile Picture

This example shows how to implement an editable title bar with background blur, a profile picture, and custom margins.

import { EditableLeftIconType, EditableTitleBar, LengthMetrics, promptAction, router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State titleBarMargin: LocalizedMargin = {
    start: LengthMetrics.vp(35),
    end: LengthMetrics.vp(35),
  };

  build() {
    Row() {
      Column() {
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Cancel,
          title: 'Main title',
          subtitle: 'Subtitle',
          // Set the background blur effect.
          options: {
            backgroundBlurStyle: BlurStyle.COMPONENT_THICK,
          },
          onSave: () => {
            promptAction.showToast({ message: "on save" });
          },
        })
        Divider().height(2).color(0xCCCCCC);
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Cancel,
          title: 'Main title',
          subtitle: 'Subtitle',
          // Remove the save button on the right.
          isSaveIconRequired: false,
        })
        Divider().height(2).color(0xCCCCCC);
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Main title',
          subtitle: 'Subtitle',
          isSaveIconRequired: false,
          onCancel: () => {
            router.back();
          },
        })
        Divider().height(2).color(0xCCCCCC);
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Main title',
          subtitle: 'Subtitle',
          menuItems: [
            {
              value: $r('sys.media.ohos_ic_public_remove'),
              isEnabled: true,
              action: () => {
                promptAction.showToast({ message: "show toast index 1" });
              }
            }
          ],
          isSaveIconRequired: false,
          // Action triggered when the Back icon on the left is clicked.
          onCancel: () => {
            router.back();
          },
        })
        Divider().height(2).color(0xCCCCCC);
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Main title',
          subtitle: 'Subtitle',
          // Set a clickable profile picture.
          imageItem: {
            value: $r('sys.media.ohos_ic_normal_white_grid_image'),
            isEnabled: true,
            action: () => {
              promptAction.showToast({ message: "show toast index 2" });
            }
          },
          // Set the content margin of the title bar.
          contentMargin: this.titleBarMargin,
          // Configure the icon on the right.
          menuItems: [
            {
              value: $r('sys.media.ohos_ic_public_remove'),
              isEnabled: true,
              action: () => {
                promptAction.showToast({ message: "show toast index 3" });
              }
            }
          ],
          onCancel: () => {
            router.back();
          },
        })
      }
    }
  }
}

Example 3: Implementing Screen Reader Announcement for the Custom Button on the Right Side

This example customizes the screen reader announcement text by setting the accessibilityText, accessibilityDescription, and accessibilityLevel properties of the custom button on the right side of the title bar.

import { promptAction, router, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI';

@Entry
@Component
struct Index1 {
  build() {
    Row() {
      Column() {
        Divider().height(2).color(0xCCCCCC)
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Cancel,
          title: 'Edit',
          menuItems: [],
          onCancel: () => {
            promptAction.showToast({ message: 'on cancel' });
          },
          onSave: () => {
            promptAction.showToast({ message: 'on save' });
          }
        })
        Divider().height(2).color(0xCCCCCC)
        EditableTitleBar({
          // The profile picture and custom buttons are unavailable.
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Main title',
          subtitle: 'Subtitle',
          imageItem: {
            value: $r('sys.media.ohos_ic_normal_white_grid_image'),
            isEnabled: true,
            action: () => {
              promptAction.showToast({ message: "show toast index 1" });
            }
          },
          menuItems: [
            {
              value: $r('sys.media.ohos_ic_public_remove'),
              label: 'Cancel',
              isEnabled: false,
              accessibilityText: 'Delete',
              accessibilityDescription: 'Tap to delete',
              action: () => {
                promptAction.showToast({ message: "show toast index 2" });
              }
            }
          ],
          onCancel: () => {
            router.back();
          },
        })
        Divider().height(2).color(0xCCCCCC)
      }
    }
  }
}

Example 4: Setting the Left Icon as the Default Focus

This example demonstrates how to set the left icon as the default focus using leftIconDefaultFocus.

import { promptAction, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      EditableTitleBar({
        leftIconStyle: EditableLeftIconType.Back,
        leftIconDefaultFocus: true, // Set the left icon as the default focus.
        title: 'Edit',
        menuItems: [],
        onSave: () => {
          promptAction.showToast({ message: 'on save' });
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

Example 5: Setting a Custom Right Icon as the Default Focus

This example demonstrates how to set a custom right icon as the default focus using defaultFocus.

import { promptAction, EditableLeftIconType, EditableTitleBar, router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      EditableTitleBar({
        leftIconStyle: EditableLeftIconType.Back,
        title: 'Main title',
        subtitle: 'Subtitle',
        // Configure the icon on the right.
        menuItems: [
          {
            value: $r('sys.media.ohos_ic_public_remove'),
            isEnabled: true,
            action: () => {
              promptAction.showToast({ message: "show toast index 1" });
            }
          },
          {
            value: $r('sys.media.ohos_ic_public_remove'),
            isEnabled: true,
            defaultFocus: true,
            action: () => {
              promptAction.showToast({ message: "show toast index 2" });
            }
          }
        ],
        onCancel: () => {
          router.back();
        },
      })
    }
    .height('100%')
    .width('100%')
  }
}

Example 6: Setting the Symbol Icon

This example demonstrates how to use symbolStyle in EditableTitleBarMenuItem to set custom symbol icons.

import { EditableLeftIconType, EditableTitleBar, promptAction, SymbolGlyphModifier } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Divider().height(2).color(0xCCCCCC)
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Cancel,
          title: 'Main title',
          subtitle: 'Subtitle',
          menuItems: [
            {
              value: $r('sys.symbol.house'),
              isEnabled: true,
              action: () => {
                promptAction.showToast({ message: 'show toast index 2' });
              }
            },
            {
              value: $r('sys.symbol.car'),
              isEnabled: false,
            }
          ],
        })
        Divider().height(2).color(0xCCCCCC)
        EditableTitleBar({
          leftIconStyle: EditableLeftIconType.Back,
          title: 'Main title',
          subtitle: 'Subtitle',
          imageItem: {
            value: $r('sys.media.ohos_app_icon'),
            isEnabled: true,
            action: () => {
              promptAction.showToast({ message: "show toast index 1" });
            }
          },
          menuItems: [
            {
              value: $r('sys.symbol.house'),
              symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]),
              isEnabled: true,
              action: () => {
                promptAction.showToast({ message: 'show toast index 2' });
              }
            },
            {
              value: $r('sys.symbol.car'),
              symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Blue]),
              isEnabled: false,
            }
          ],
        })
        Divider().height(2).color(0xCCCCCC)
      }.width('100%')
    }.height('100%')
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton