【每日学点HarmonyOS Next知识】feed流图片大小、列表组件扩展、自定义弹窗、媒体监听、列表项交换

1、HarmonyOS feeds流图片类内容卡片图片宽度固定，如何设置当前图片组件的高度为宽度的3/4？

feeds流图片类内容卡片图片宽度固定，如何设置当前图片组件的高度为宽度的3/4

在Image 的onComplete 回调中可以获取到组件的宽高，componentWidth，再通过计算可以实现高度为宽度的3/4API地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-service-widget-basic-image-V5

图片数据加载成功和解码成功时均触发该回调，返回成功加载的图片尺寸。componentWidth componentHeight如果是自适应的组件，则在onAreaChange事件指组件显示的尺寸、位置等发生变化时触发的事件，当组件初次渲染或后续发生变化时都可监听到，参数newValue中有组件宽高等值，具体使用方法请参考文档。

文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5

2、HarmonyOS 希望List组件能扩展onScrollIndex(event: (start: number, end: number, center10+: number) => void)事件？

希望List组件能扩展onScrollIndex(event: (start: number, end: number, center10+: number) => void)事件，目前该事件只能ListItemGroup作为一个整体占一个索引值，只有在ListItemGroup变化时才有回调，需要把吸顶的ListItemGroup的header和LisItem做关联，因此需要滑动到某个特定的ListItem的回调，希望List组件能像listScroller对Scorller扩展一样，提供更细粒度的回调，在回调中增加indexInGroup参数

新版本List组件绑定ListScroller，可以通过scrollToItemInGroup(index: number, indexInGroup:number, smooth?: boolean, align?: ScrollAlign): void滑动到指定的ListItemGroup中指定的ListItem，参考相关文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#scrolltoitemingroup11

已有事件onScrollVisibleContentChange，请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#onscrollvisiblecontentchange12

onScrollVisibleContentChange(handler: OnScrollVisibleContentChangeCallback)

有子组件划入或划出List显示区域时触发。计算触发条件时，每一个ListItem、ListItemGroup中的header或footer都算一个子组件。

List的边缘效果为弹簧效果时，在List划动到边缘继续划动和松手回弹过程不会触发onScrollVisibleContentChange事件。

触发该事件的条件：列表初始化时会触发一次，List显示区域内第一个子组件的索引值或最后一个子组件的索引值有变化时会触发。

3、HarmonyOS 自定义弹窗CustomDialog调用问题？

使用@CustomDialog装饰器创建了一个自定义弹窗组件想供项目组其他成员使用，但是发现在某些场景，自定义弹窗无法正常展示，比如在page-Index.ets 点击“Next”按钮获取Preferences实例的回调中，调用自定义弹窗组件展示方法无法正常展示，但是调用系统组件AlertDialog.show却可以正常展示弹窗，请问我的自定义弹窗组件该如何改进，可以在保留原有调用方式（CustomDialogProvider.showDialog({ content: “我是内容” });）的情况下，像系统组件AlertDialog.show一样正常展示自定义弹窗）

推荐使用Preferences的getPreferencesSync同步方法，这样不会出现调用不了的情况

4、HarmonyOS mediaquery的on函数监听时机的问题？

监听横竖屏使用mediaquery的on函数，监听时机的问题，放在app初始化的时候监听不行，得setTimeout 3秒，才能监听得到消息

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-mediaquery-V5#ZH-CN_TOPIC_0000001930756753__on

5、HarmonyOS list 列表项交换？

需要构建一个列表项交换的ui交互逻辑

推荐 用Gird列表项进行交换，见如下demo

@Entry@Componentstruct GridExample { @State numbers: string[] = [] scroller: Scroller = new Scroller() @State text: string = \'drag\' @Builder pixelMapBuilder() { //拖拽过程样式 Column() { Text(this.text) .fontSize(16) .backgroundColor(0xF9CF93) .width(80) .height(80) .textAlign(TextAlign.Center) } } aboutToAppear() { for (let i = 1;i  { GridItem() { Text(day)  .fontSize(16)  .backgroundColor(0xF9CF93)  .width(80)  .height(80)  .textAlign(TextAlign.Center) } }) } .columnsTemplate(\'1fr 1fr 1fr\') .columnsGap(10) .rowsGap(10) .width(\'90%\') .backgroundColor(0xFAEEE0) .height(300) .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。 this.text = this.numbers[itemIndex] return this.pixelMapBuilder() //设置拖拽过程中显示的图片。 }) .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。 // isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生 if (!isSuccess || insertIndex >= this.numbers.length) { return } console.info(\'tag\' + itemIndex + \'\', insertIndex + \'\') //itemIndex拖拽起始位置，insertIndex拖拽插入位置 this.changeIndex(itemIndex, insertIndex) }) }.width(\'100%\').margin({ top: 5 }) }}