【每日學點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)}}