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