【每日学点鸿蒙知识】list折叠动画效果、混淆问题定位、bindPopup问题等

1、如何实现list的折叠动画效果？

• 在知道listItem的高度的情况下，可以通过控制高度的变化来实现折叠动画。
• 在listitem高度未知的情况下，可以在 animateTo里对数据进行增删来实现折叠动画效果。

2、如何在HarmonyOS中添加编译参数？

1、CMakeLists.txt中添加

#设置构建类型为Release，这将关闭debug调试信息
set(CMAKE_BUILD_TYPE Release)

#-s 标志用于优化编译，它会告诉编译器生成更短的代码
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -s")

#解决符号冲突
set(CMAKE_SHARED_LINKER_FLAGS "-Wl,-Bsymbolic")

#统一添加
#启用堆栈保护；捕获缓冲区溢出安全问题；代码优化；整数溢出检查等
set(CMAKE_CXX_FLAGS "-fstack-protector-all -D_FORTIFY_SOURCE=2 -O2 -ftrapv -s")

2\externalnativeoptions配置中添加

模块级build-profile.json5中externalNativeOptions参数是NDK工程C/C++文件编译配置的入口，可以通过path指定CMake脚本路径、arguments配置CMake参数、cppFlags配置C++编译器参数、abiFilters配置编译架构等。

"externalNativeOptions": {
  "path": "./src/main/cpp/CMakeLists.txt",
  "arguments": "-DCMAKE_BUILD_TYPE=Release",
  "cppFlags": "-fstack-protector-all -D_FORTIFY_SOURCE=2 -O2 -ftrapv -s",
}

3、bindPopup样式问题？

bindPopup样式问题：

1. 无法改变Popup窗圆角大小
2. enableArrow为true时，箭头颜色为白色，是否可以改变箭头颜色

问题一：设置radius就可以改变Popup窗圆角大小，详见https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup-0000001774121186#ZH-CN_TOPIC_0000001774121186__bindpopup；

问题二：目前箭头颜色无法修改，只能通过popupColor设置气泡背景色。

4、如何定位混淆问题？

遇到debug没有问题，release报错和崩溃

定位手段：

1. 混淆配置-disable-obfuscation，关闭所有混淆。
2. release模式编译，异常消除，确定为混淆导致的问题。
3. 可将-compact混淆配置注释掉，查看具体的报错位置。

编译产物目录：build/default/cache/default/default@HarCompileArkTS/esmodule/release

问题原因是属性名称、方法名称还是参数名称被混淆导致，分别可以使用-keep-property-name、-keep-global-name、-keep规避。

5、BindPopup的offset属性是基于什么定位进行偏移的？

bindpopup offset是相对于什么定位进行偏移的？基准点是什么？例如说offset写了x: 100, y: 100，当我触摸屏幕的时候 x,y是基于哪个点进行偏移？

基于绑定的组件左上角的锚点为基准点；目前bindpopup在5.0上规格有变动，当前Webview文档中的写法已不完全适配长按菜单的功能。如果需使用bindpopup功能。需要单独在webview组件前（同层）增加一个大小为0的组件来承载bindpopup。并且目前UX规范，针对边距有一个左右大小为7vp的偏移，以保证弹出菜单在屏幕范围内。

import web_webview from '@ohos.web.webview'
import pasteboard from '@ohos.pasteboard'

const TAG = 'ContextMenu';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private result: WebContextMenuResult | undefined = undefined;
  @State linkUrl: string = '';
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State showMenu: boolean = false;

  @Builder
  //构建自定义菜单及触发功能接口
  MenuBuilder() {
    //以垂直列表形式显示的菜单。
    Menu() {
      //展示菜单Menu中具体的item菜单项。
      MenuItem({
        content: '复制图片',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          this.result?.copyImage();
          this.showMenu = false;
        })
      MenuItem({
        content: '剪切',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          this.result?.cut();
          this.showMenu = false;
        })
      MenuItem({
        content: '复制',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          this.result?.copy();
          this.showMenu = false;
        })
      MenuItem({
        content: '粘贴',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          this.result?.paste();
          this.showMenu = false;
        })
      MenuItem({
        content: '复制链接',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          let pasteData = pasteboard.createData('text/plain', this.linkUrl);
          pasteboard.getSystemPasteboard().setData(pasteData, (error) => {
            if (error) {
              return;
            }
          })
          this.showMenu = false;
        })
      MenuItem({
        content: '全选',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          this.result?.selectAll();
          this.showMenu = false;
        })
    }
    .width(150)
    .height(300)
    .backgroundColor("#eeeeee")
  }

  build() {
    Column() {
      Row()
        .width(0)
        .height(0)
        .position({ x: 0, y: 0 })
        .bindPopup(this.showMenu,
          {
            builder: this.MenuBuilder(),
            enableArrow: false,
            placement: Placement.LeftTop,
            targetSpace: 0,
            shadow: {
              radius: 0
            },
            offset: { x: this.offsetX - 7, y: this.offsetY },
            mask: false,
            onStateChange: (e) => {
              if (!e.isVisible) {
                this.showMenu = false;
                this.result!.closeContextMenu();
              }
            }
          })

      Web({ src: '', controller: this.controller })//触发自定义弹窗
        .onControllerAttached(() => {
          this.controller.setCustomUserAgent(this.controller.getUserAgent() + " Android")
          this.controller.loadUrl($rawfile("OnContextMenuShow/index.html"))
        })//触发自定义弹窗
        .onContextMenuShow((event) => {
          if (event) {
            this.result = event.result
            console.info("x coord = " + event.param.x())
            console.info("link url = " + event.param.getLinkUrl())
            this.linkUrl = event.param.getLinkUrl()
          }
          console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);
          this.showMenu = true;
          this.offsetX = Math.max(px2vp(event?.param.x() ?? 0) - 0, 0);
          this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0);
          return true
        })
    }
  }
}