当前位置：首页 > news >正文

【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置

news 2025/8/29 18:01:03

【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置

1、HarmonyOS WebView加载url无法滚动？

scroll 里面嵌套webView，demo参考：

// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()@State mode: WebLayoutMode = WebLayoutMode.FIT_CONTENTbuild() {Column() {Text("这里是头部区域").width("100%").height('30%').backgroundColor("#f89f0f").fontSize(28).fontColor("#FF0F0F")Web({ src: $rawfile('Index.html'), controller: this.controller }).width('100%').height(200)// .layoutMode(this.mode).zoomAccess(false).domStorageAccess(true).overviewModeAccess(true).imageAccess(true).onlineImageAccess(true).fileAccess(true).databaseAccess(true)Text("这里是底部区域").fontSize(28).fontColor("#FF0F0F").width("100%").height('40%').backgroundColor("#f89f0f")}.width('100%').height('100%')}
}

2、HarmonyOS 事件回调？

有两个页面，A、B，在A中通过router.pushUrl方法跳转至B页面。B页面有一个按钮btn，点击btn时，如何将btn的触发事件告知A页面。B页面从始至终不进行back（返回）。

使用自定义订阅事件的方式来实现该功能：参考demo：

//index.ets
import display from '@ohos.display';
import emitter from '@ohos.events.emitter';
import { router } from '@kit.ArkUI';
import { JSON } from '@kit.ArkTS';@Entry
@Component
struct DisplayTest {build() {Column({space:20}){Button('Test').type(ButtonType.Capsule).onClick(() => {let innerEvent: emitter.InnerEvent = {eventId: 12222};//触发id为12222的事件emitter.on(innerEvent, (data) => {console.info('once callback' + JSON.stringify(data));});router.pushUrl({url:'pages/PageOne'})}).width('50%')}.width("100%").height('100%').justifyContent(FlexAlign.Center)}
}//PageOne.ets
import emitter from '@ohos.events.emitter';@Entry
@Component
struct PageOne {build() {Column(){Text('PageOne').width('50%')Button('send').type(ButtonType.Capsule).width('50%').onClick(() => {let eventData: emitter.EventData = {data: {"content": "c","id": 1,}};let innerEvent: emitter.InnerEvent = {eventId: 12222,priority: emitter.EventPriority.HIGH};//发布id为12222的事件emitter.emit(innerEvent, eventData);})}.justifyContent(FlexAlign.Center).width('100%').height('100%')}
}

3、HarmonyOS ListItem里面的属性selectable是干嘛用的？

ListItem的selectable属性为当前ListItem元素是否可以被鼠标框选，并不能使用此属性实现多选功能开发者可以根据动态属性设置attributeModifier来维护管理多选状态，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5

动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。

4、HarmonyOS web组件如何监听h5内部的router跳转？

需要拦截web组件内部的h5路由跳转进行参数的处理，请问有方法拦截吗

1、用于拦截url并返回响应数据：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5
2、用于判断是否阻止此次访问：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onloadintercept10

5、HarmonyOS Scroll中嵌套Grid组件的时候，Grid必须要设置height高度吗？

Scroll中嵌套Grid组件的时候，Grid必须要设置height高度吗

Grid的宽高没有设置时，默认适应父组件尺寸。将代码中Grid的父组件（Column）的宽高设置下比如： .width(“100%”) .height(“100%”)我这边是可以正常显示出来的。

参考demo：

@Entry
@Component
export struct AllChannelsPage{@State tabs: Array<String> = new Array();@State dragChannel: string = 'drag';private deviceWidth: number = (AppStorage.get('deviceWidth') as number)@State itemWidth: number = 80;@State itemHeight: number = 80;@State mineRowCount: number = 1;@State mineGridHeight: number = 100;@State mainTitieDes: string = '点击进入频道';aboutToAppear(): void {for(let i = 0; i < 30; i++ ){this.tabs.push('频道' + i);}this.itemWidth = (this.deviceWidth - 32 - 30)/4;this.itemHeight = this.itemWidth / 2.1;this.mineRowCount = Math.ceil(this.tabs.length / 4);this.mineGridHeight = this.mineRowCount * this.itemHeight + (this.mineRowCount - 1) * 10}@Builder pixelMapBuilder() { //拖拽过程样式Column() {Text(this.dragChannel).fontSize('15fp')// .fontColor($r('app.color.color202022')).textAlign(TextAlign.Center).width(this.itemWidth).height(this.itemHeight)// .backgroundColor($r('app.color.colorF9F9F9')).borderRadius(4)}}changeIndex(index1: number, index2: number) { //交换数组位置let temp = this.tabs[index1];this.tabs[index1] = this.tabs[index2];this.tabs[index2] = temp;}build() {NavDestination(){Column(){Scroll(){Column(){Row(){Text().width(4).height(16)// .backgroundColor($r('app.color.colorF21333')).borderRadius(2)Blank().width(6)Text('我的频道').fontSize('16fp')// .fontColor($r('app.color.color202022'))Blank().width(8)Text(this.mainTitieDes).fontSize('12fp')// .fontColor($r('app.color.colorB1B1BB'))Blank().layoutWeight(1)Text('重置').fontSize('15fp')// .fontColor($r('app.color.color909099'))Text().width(1).height(10)// .backgroundColor($r('app.color.color909099')).margin({left: 4, right: 4})Text('编辑').fontSize('15fp')// .fontColor($r('app.color.colorF21333'))}.width('100%').margin({top: 5, bottom: 15}).padding({ left: 16, right: 16 })Grid() {ForEach(this.tabs, (channel: string) => {GridItem() {Text(channel).fontSize((channel?? '').length > 5 ? '11fp': '15fp')// .fontColor($r('app.color.color202022')).textAlign(TextAlign.Center)// .width(this.itemWidth)// .height(this.itemHeight).width('100%').height(80)// .backgroundColor($r('app.color.colorF9F9F9')).borderRadius(4)// .onTouch((event: TouchEvent) => {//   if (event.type === TouchType.Up) {//     this.dragChannel = channel.channelName ?? '';//   }// })}})}.columnsTemplate('1fr 1fr 1fr 1fr').columnsGap(10).rowsGap(10).onScrollIndex((first: number) => {console.info(first.toString());})// .width('100%')// .height('80%').padding({ left: 16, right: 16 }).supportAnimation(true).editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。}).onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。console.info('tag' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置this.changeIndex(itemIndex, insertIndex)}).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})Text().width('100%').height(500)}.width("100%").height("100%")}.width('100%').layoutWeight(1)}}.hideTitleBar(true)}}

查看全文

http://www.lryc.cn/news/546670.html