【每日学点 HarmonyOS Next 知识】span 问题、组件标识属性、属性动画回调、图文混排、相对布局问题

// xxx.etsimport { IntentionCode } from '@ohos.multimodalInput.intentionCode'
class Utils {  static rect_left: number  static rect_top: number  static rect_right: number  static rect_bottom: number  static rect_value: Record<string, number>
  //获取组件所占矩形区域坐标  static getComponentRect(key:string):Record<string, number> {    let strJson = getInspectorByKey(key)    let obj:Record<string, string> = JSON.parse(strJson)    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))    let rectInfo:string[] = JSON.parse('[' + obj.$rect + ']')    console.info("[getInspectorByKey] rectInfo is: " + rectInfo)    Utils.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]    Utils.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]    Utils.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]    Utils.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]    return Utils.rect_value = {      "left": Utils.rect_left, "top": Utils.rect_top, "right": Utils.rect_right, "bottom": Utils.rect_bottom    }  }}
@Entry@Componentstruct IdExample {  @State text: string = ''
  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button() {        Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold)      }.margin({ top: 20 }).backgroundColor('#0D9FFB')      .onKeyEvent(() => {        this.text = "onKeyTab"      })
      Button() {        Text('click to start').fontSize(25).fontWeight(FontWeight.Bold)      }.margin({ top: 20 })      .onClick(() => {        console.info(getInspectorByKey("click"))        console.info(JSON.stringify(getInspectorTree()))        this.text = "Button 'click to start' is clicked"        setTimeout(() => {          sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件        }, 2000)      }).id('click')
      Button() {        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)      }.margin({ top: 20 }).backgroundColor('#0D9FFB')      .gesture(        LongPressGesture().onActionEnd(() => {          console.info('long clicked')          this.text = "Button 'longClick' is longclicked"          setTimeout(() => {            let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标            let touchPoint: TouchObject = {              id: 1,              type: TouchType.Down,              x: rect.left + (rect.right - rect.left) / 2, // 相对于组件左上角的水平方向坐标              y: rect.top + (rect.bottom - rect.top) / 2, // 相对于组件左上角的垂直方向坐标              screenX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标，API10已废弃，采用windowX替代              screenY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标，API10已废弃，采用windowY替代              windowX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标              windowY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标              displayX: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的水平方向坐标              displayY: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的垂直方向坐标            }            sendTouchEvent(touchPoint) // 发送触摸事件            touchPoint.type = TouchType.Up            sendTouchEvent(touchPoint) // 发送触摸事件          }, 2000)        })).id('longClick')
      Button() {        Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)      }.type(ButtonType.Capsule).margin({ top: 20 })      .onClick(() => {        console.info('onTouch is clicked')        this.text = "Button 'onTouch' is clicked"        setTimeout(() => {          let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标          let mouseEvent: MouseEvent = {            button: MouseButton.Left,            action: MouseAction.Press,            x: rect.left + (rect.right - rect.left) / 2, // 相对于组件左上角的水平方向坐标            y: rect.top + (rect.bottom - rect.top) / 2, // 相对于组件左上角的垂直方向坐标            screenX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标，API10已废弃，采用windowX替代            screenY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标，API10已废弃，采用windowY替代            windowX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标            windowY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标            displayX: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的水平方向坐标            displayY: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的垂直方向坐标            stopPropagation: () => {            },            timestamp: 1,            target: {              area: {                width: 1,                height: 1,                position: {                  x: 1,                  y: 1                },                globalPosition: {                  x: 1,                  y: 1                }              }            },            source: SourceType.Mouse,            pressure: 1,            tiltX: 1,            tiltY: 1,            sourceTool: SourceTool.Unknown          }          sendMouseEvent(mouseEvent) // 发送鼠标事件        }, 2000)      }).id('onTouch')
      Button() {        Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold)      }.margin({ top: 20 }).backgroundColor('#0D9FFB')      .onMouse(() => {        console.info('onMouse')        this.text = "Button 'onMouse' in onMouse"        setTimeout(() => {          let keyEvent: KeyEvent = {            type: KeyType.Down,            keyCode: 2049,            keyText: 'tab',            keySource: 4,            deviceId: 0,            metaKey: 0,            timestamp: 0,            stopPropagation: () => {            },            intentionCode: IntentionCode.INTENTION_DOWN          }          sendKeyEvent(keyEvent) // 发送按键事件        }, 2000)      }).id('onMouse')
      Text(this.text).fontSize(25).padding(15)    }    .width('100%').height('100%')  }}

@Entry@Componentstruct Index {  private swiperController: SwiperController = new SwiperController()  @State rightHeight: Length = 80  @State swiperData: string[] = ['',''];  @State currentIndex: number = 0;  build() {    Column() {      Text('近期需关注')        .textAlign(TextAlign.Start)        .fontSize(20)        .width('100%')      Text('宝宝能独坐啦').margin({bottom:10})        .textAlign(TextAlign.Start)        .width('100%')      Row(){        Column(){          Swiper(this.swiperController){            Column(){              Text('疫苗对比1')                .fontSize('20')              Text('#流感疫苗选三价还是四价？')                .textAlign(TextAlign.Start)                .width('100%')            }            Column(){              Text('疫苗对比2')                .fontSize('20')              Text('#2流感疫苗选三价还是四价？流感疫苗选三价还是四价？流感疫苗选三价还是四价？2')            }          }          .indicator(false)          .onChange(index => {            this.currentIndex = index;          })          // 自定义indicator          Row({ space: 20 }) {            ForEach(this.swiperData, (item: string, index: number) => {              Shape() {                Rect().width(12).height(5).radius(5).fill(index !== this.currentIndex ? Color.Black : Color.Red)                  .fillOpacity(0.6)              }            })          }          .margin({ top: 10 })        }        .layoutWeight(1) //占用剩余的宽度        .backgroundColor(Color.Green)        .onAreaChange((newA:Area,oldA:Area)=>{          this.rightHeight = oldA.height;        })        .padding(10)
        Row(){          Column(){            Image($r('app.media.app_icon'))              .width(30)              .height(30)            Text("记头围")          }          Column(){            Image($r('app.media.app_icon'))              .width(30)              .height(30)            Text("记体重")          }          .margin({left:10})        }        .backgroundColor(Color.Green)        .padding({ top: '20.00vp', right: '10.00vp', bottom: '20.00vp', left: '10.00vp' })        .margin({left:10})        .height(this.rightHeight)      }      .margin({bottom:10})    }    .width('100%')    .padding(10)    .backgroundColor(Color.Gray)  }}