【每日学点鸿蒙知识】RelativeContainer组件、List回弹、Flutter方法调用、Profiler工具等
1、RelativeContainer组件auto对齐规则？
当height设置为auto，这时候为什么子组件设置
top:{anchor: "__container__",align: VerticalAlign.Top}
后auto就不生效了呢，anchor锚点不是默认top对齐的吗？
这是为了避免二次布局导致过大的性能开销，给高度标记了auto之后，在垂直方向上，RelativeContainer会依赖组件间在垂直方向上的布局这样会导致二次布局，因为子组件此时是相对容器的垂直方向上的布局，那这个时候，父组件的布局又要依赖子组件布局之后的结果再次进行布局。
2、如何实现scroll、list单边回弹效果？
在onDidScroll里获取currentOffset().yOffset来控制单边回弹效果，在list组件还可以通过onScrollIndex实现单边回弹效果。
scroll组件
@Entry
@Component
struct Index {
@State yOffset: number = 0
scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Stack({ alignContent: Alignment.TopStart }) {
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item: number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}, (item: string) => item)
}.width('100%')
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.friction(0.6)
.edgeEffect(this.yOffset <= 0 ? EdgeEffect.Spring : EdgeEffect.None) // 滚动到边沿后回弹
.onDidScroll(() => {
this.yOffset = this.scroller.currentOffset().yOffset;
})
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
}
}
List组件
@Entry
@Component
struct Index {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State isTop: boolean = true
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(this.isTop ? EdgeEffect.None : EdgeEffect.Spring)
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
if (firstIndex === 0) {
this.isTop = true
} else {
this.isTop = false
}
})
.width('90%')
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}
3、HarmonyOS 能调用Flutter的Dart接口的代码么？
使用ohos平台的 MethodChannel#invokeMethod 方法，可以实现HarmonyOS调用dart代码中的方法的功能。
4、使用IDE自带profiler工具检测CPU，Current process显示为0%, Other process显示偏高。这里显示数据含义是什么？如何使用工具分析CPU高原因？
otherprocess包含了桌面应用、系统的一些后台服务等。
CPU分析具体可以参考官方指导文档 CPU活动分析板块：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-insight-session-cpu-V5
5、HarmonyOS 报错 Error while Deploy Hap？
打包的har包，在壳工程内，编译通过，但是安装时失败。
04/10 14:01:54: Install Failed: error: failed to install bundle.
code:9568278
error: install version code not same.
$ tiaoyou shell rm -rf data/local/tmp/f47e1222b8c64dbe92f86bc3b55cc3d2
Error while Deploy Hap
该报错是因为需要安装的应用和系统中已经安装的应用，app.json的versionCode字段不一致。
- 可能开发者使用IDE的debug按钮安装了该应用，后来又通过打包之后hdc install 的方式进行了重复安装，可以使用命令查看已安装应用的debug字段信息：
bm dump -n 应用bundleName | grep debug
普通应用卸载安装：
hdc uninstall 应用bundleName
清空应用数据：
hdc shell bm clean -d -n 应用bundleName
- 也可能是保存的数据应用版本和新安装的版本不一致导致的 ===》Run configuration-General，去掉保存数据Keep Application Data的勾选。