如何在Text组件关闭bindSelection自定义菜单时,取消选中状态

Text组件绑定bindSelectionMenu自定义菜单,长按弹出自定义菜单,使用closeSelectionMenu关闭自定义菜单,文本选中状态不会取消。

HarmonyOS
2024-07-22 11:56:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
sslijun

该场景下要取消选中状态可以使用selection重新设置选中区域,在调用closeSelectionMenu关闭自定义菜单时重新设置selection的start、end即可取消选中状态。

参考代码:

@Entry 
@Component 
struct Demo { 
  controller: TextController = new TextController(); 
  options: TextOptions = { controller: this.controller }; 
  @State start: number = -1 
  @State end: number = -1 
 
  build() { 
    Column() { 
      Column() { 
        Text(undefined, this.options) { 
          Span('Hello World') 
          ImageSpan($r('app.media.dog')) 
            .width('100px') 
            .height('100px') 
            .objectFit(ImageFit.Fill) 
            .verticalAlign(ImageSpanAlignment.CENTER) 
        } 
        .selection(this.start, this.end) 
        .copyOption(CopyOptions.InApp) 
        //长按弹出自定义菜单 
        .bindSelectionMenu(TextSpanType.TEXT, this.LongPressImageCustomMenu, TextResponseType.LONG_PRESS, { 
          onDisappear: () => { 
            console.info(`自定义选择菜单关闭时回调`); 
          }, 
          onAppear: () => { 
            console.info(`自定义选择菜单弹出时回调`); 
          } 
        }) 
        //选中区域发生变化时触发回调,更新选中区域的起始下标和末尾下标 
        .onTextSelectionChange((selectionStart: number, selectionEnd: number) => { 
          this.start = selectionStart 
          this.end = selectionEnd 
          console.info(`文本选中区域变化回调, selectionStart: ${selectionStart}, selectionEnd: ${selectionEnd}`); 
        }) 
        .borderWidth(1) 
        .borderColor(Color.Red) 
        .width(200) 
        .height(100) 
      } 
      .width('100%') 
      .backgroundColor(Color.White) 
      .alignItems(HorizontalAlign.Start) 
      .padding(25) 
    } 
    .height('100%') 
  } 
 
  @Builder 
  LongPressImageCustomMenu() { 
    Column() { 
      Menu() { 
        MenuItemGroup() { 
          MenuItem({ 
            startIcon: $r('app.media.app_icon'), 
            content: "Right Click Menu 1", 
            labelInfo: "" 
          })//点击自定义菜单时,重新设置选中区域的起始下标和末尾下标 
            .onClick((event) => { 
              this.start = -1 
              this.end = -1 
              this.controller.closeSelectionMenu(); 
            }) 
 
          MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 2", labelInfo: "" }) 
          MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 3", labelInfo: "" }) 
        } 
      } 
      .MenuStyles() 
    } 
  } 
} 
 
@Extend(Menu) 
function MenuStyles() { 
  .radius($r('sys.float.ohos_id_corner_radius_card')) 
  .clip(true) 
  .backgroundColor('#F0F0F0') 
}
分享
微博
QQ
微信
回复
2024-07-22 19:44:37
相关问题
如何自定义组件原型菜单
701浏览 • 1回复 待解决
如何在BuildProfile中自定义参数?
36浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
1995浏览 • 1回复 待解决
如何在自定义函数中创建一个UI组件
1630浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
1990浏览 • 1回复 待解决
如何自定义模拟Tabs组件
677浏览 • 1回复 待解决
ArkTs如何自定义容器组件
2792浏览 • 1回复 待解决