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

【每日学点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_CONTENT

  build() {
    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)
  }

}