【ArkUI 文本展示系列】五：控制文本的交互行为（一）基础交互控制

最新推荐文章于 2025-11-25 11:51:46 发布

原创最新推荐文章于 2025-11-25 11:51:46 发布 · 707 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #harmonyos #ArkUI #键盘

ArkUI文本显示与编辑专栏收录该内容

8 篇文章

订阅专栏

Text组件可以控制与用户互动的行为，比如点击、长按、拖拽，以及文本组件独有的选中区、文本选择菜单。Text支持通用属性，交互行为可以通过通用属性和Text的接口控制。下面通过五个章节介绍Text如何控制获焦、选择文本、复制、文本选择菜单。更多交互响应的能力，请查阅《交互响应概述》

一、控制Text能否获得焦点

与焦点相关的有两个接口enabled、focusable、textSelectable。

enabled默认值是true，表示组件可交互，响应点击等操作。
focusable在Text上的默认值是false，表示Text不可以获得焦点。
textSelectable默认值是TextSelectableMode.SELECTABLE_UNFOCUSABLE，表示文本可选择但不可获焦。这里读者可能有疑惑，没有焦点时文本怎么选择？实际上Text选中区和焦点是解耦的。

接口	参数	焦点	选择文本
enabled	false	无法获焦	无法选择文本
focusable	false	无法获焦	没有影响
textSelectable	TextSelectableMode.UNSELECTABLE	无法获焦	无法选择文本
textSelectable	TextSelectableMode.SELECTABLE_UNFOCUSABLE	无法获焦	可选择文本
enabled	true	不限制能否获焦	不限制能否选择文本
focusable	true	可获焦	没有影响
textSelectable	TextSelectableMode.SELECTABLE_FOCUSABLE	可获焦	可选择文本

二、控制Text能否选择文本

Text组件的文本选择行为，和焦点无关，没有焦点也可以选择文本。

enabled(false) ，不可以交互。此时不可以选择文本

textSelectable(TextSelectableMode.UNSELECTABLE) 和 SELECTABLE_UNFOCUSABLE

2.1 双击、长按能否选择文本

读者最关心的问题是：双击、长按能否选择文本。下面用长按举例说明，如何实现长按不能选中文本。

这里是两个条件：1、Text默认的长按事件是否触发。2、Text是否支持选中文本。有一个条件不能达成，就可以实现无法选中文本。

2.1.1 Text默认的长按事件是否触发

@Entry
@Component
struct demo {
  @State message: string = '这是一段中文文本'

  build() {
    Column({ space: 20 }) {
      Text(this.message)
        .copyOption(CopyOptions.LocalDevice)

      Text(this.message)
        .copyOption(CopyOptions.LocalDevice)
        .gesture(
          LongPressGesture({ repeat: true, duration: 400 })
            // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（Text默认的响应长按事件间隔是600ms）
            .onAction((event: GestureEvent) => {
              return true
            })
            .onActionEnd((event: GestureEvent) => {
            })
        )
    }
    .padding(20)
  }
}

在上面这个demo中，给Text设置了一个自定义的长按手势，使Text不能响应系统默认的长按事件。最终结果是，即使设置了CopyOption.LocalDevice，长按Text也不会出现选中区和文本选择菜单。

2.1.2 Text是否支持选中文本

设置 enabled(false)、textSelectable(TextSelectableMode.UNSELECTABLE)、copyOption(CopyOptions.None) ，都可以让Text无法选中文本。

三、设置选中区域

在Text可以选中文本的前提下，通过selection接口设置选中区域。如果在onTextSelecting回调中设置选中区的Start和End，需要同步更新给selection接口的入参。参考《关闭选中菜单》中的demo。

四、控制文本的复制粘贴行为

copyOption接口控制能否复制粘贴。入参CopyOptions有三个枚举值，控制复制文本后能够粘贴内容的应用。

参数	作用
CopyOptions.None	不支持复制粘贴
CopyOptions.InApp	仅在当前应用内复制粘贴
CopyOptions.LocalDevice	复制后在当前设备内所有应用内粘贴

五、控制能否弹出菜单

默认情况下，选中文本之后会弹出文本选择菜单。开发者可以通过TextController调用closeSelectionMenu 主动关闭菜单。如果想要选择文本之后禁止弹出菜单，可以通过bindSelectionMenu 和 editMenuOptions 自定义菜单。只要自定义菜单是空的，视觉上看就没有弹出文本选择菜单。

下面是“选择文本之后禁止弹出菜单”的demo，通过editMenuOptions自定义一个空的文本选择菜单实现。

@Entry
@Component
struct demo {
  @State text: string = 'TextArea editMenuOptions'

  onCreateMenu(menuItems: Array<TextMenuItem>) {
    menuItems = []
    return menuItems
  }

  build() {
    Column({ space: 20 }) {
      Text(this.text)
        .copyOption(CopyOptions.LocalDevice)
        .editMenuOptions({
          onCreateMenu: this.onCreateMenu,
          onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
            return false
          }
        })
    }
    .padding(20)
  }
}

效果如下
在这里插入图片描述

六、AI识别实体

Text可以从文本提取出具有特定意义的实体，并在此基础上完成相关操作。配置enableDataDetector和dataDetectorConfig属性后，Text组件会自动识别并高亮显示实体。点击、选中实体之后，弹出的菜单也会增加对应选项。

具体示例如下所示：

Text(
  '电话号码：' + '(86) (755) ********' + '\n' +
    '链接：' + 'www.********.com' + '\n' +
    '邮箱：' + '***@example.com' + '\n' +
    '地址：' + 'XX省XX市XX区XXXX' + '\n' +
    '时间：' + 'XX年XX月XX日XXXX'
)
  .fontSize(16)
  .copyOption(CopyOptions.LocalDevice)
  .enableDataDetector(true)// 使能实体识别
  .dataDetectorConfig({
    // 配置识别样式
    // types可支持PHONE_NUMBER电话号码、URL链接、EMAIL邮箱、ADDRESS地址、DATE_TIME时间
    // types设置为null或者[]时，识别所有类型的实体
    types: [], onDetectResultUpdate: (result: string) => {
    }
  })