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

1、HarmonyOS 如果有两个span 第一个span放的是中文 第二个span超长 这时候 Ellipsis会展示异常？

如果有两个span 第一个span放的是中文 第二个span超长 这时候 Ellipsis会展示异常

设置断行规则.wordBreak(WordBreak.BREAK_ALL)即可。

参考连接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#ZH-CN_TOPIC_0000001893209429__wordbreak11

2、HarmonyOS 如何获取控件的组件标识属性？

可以通过getInspectorByKey9+getInspectorByKey(id: string): string来获取指定id的组件的所有属性，不包括子组件信息。参考示例代码如下：

// xxx.ets
import { IntentionCode } from '@ohos.multimodalInput.intentionCode'class Utils {static rect_left: numberstatic rect_top: numberstatic rect_right: numberstatic rect_bottom: numberstatic 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
@Component
struct 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.UpsendTouchEvent(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%')}
}

3、HarmonyOS 属性动画是否有对动画执行中的回调监听？

属性动画是否有对动画执行中的回调监听

属性动画没有，Animator动画可以有onFrame回调返回动画的当前进度。

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5#ZH-CN_TOPIC_0000001893369037__onframe12

4、HarmonyOS 图片+文字排列问题？

图片+文字，然后第二行图片又开始从头开始排，这种要如何做

只需要在Text组件添加wordBreak(WordBreak.BREAK_ALL)

5、HarmonyOS RelativeContainer组件缺陷无法实现ui效果？

RelativeContainer组件缺陷无法实现ui效果

1. 左侧占满剩余宽度：可未左侧设置layoutWeight属性；
2. B高度依赖A高度，A高度自适应：可使用onAreaChange事件动态获取A高度，然后为B设置高度；
3. indicator默认边距无法消除：目前swiper内置indicator样式有宽高，不支持修改，可通过调整组件的margin值来适应，也可以自定义indicator;
4. 获取swiper组件内容的最大高度：目前没有获取swiper未展示的组件的宽高属性，无法自适应最大子组件的高度，建议设置最大高度来实现。以下是参考demo：

@Entry
@Component
struct 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;})// 自定义indicatorRow({ 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)}
}