【每日学点鸿蒙知识】挖空样式、解密库性能问题、按钮下拉列表弹窗、Scroll组件回调事件问题、判断当前时间之后方法

1、HarmonyOS 如何实现券组件的挖空样式？

参考demo：

// xxx.ets
@Entry
@Component
struct ShapeExample {private borderWdth: number = 2;private radiusWdthSmall: number = 8private radiusWdthBig: number = 10build() {Column({ space: 10 }) {Row(){Column(){Stack(){Column(){Text('618').fontSize(10).fontColor('#fff')}.position({x: 0,y: 0,}).width(40).backgroundColor('rgba(255,255,255,0.3)').borderRadius({topLeft: this.radiusWdthBig,bottomRight: this.radiusWdthBig,})Column(){Text(){Span('￥').fontSize(16).fontColor('#fff')Span('20').fontSize(20)}.fontColor('#fff').fontWeight(FontWeight.Bold)Text(){Span('无门槛使用').fontSize(10).fontColor('#fff')}}}.width('100%').height('100%')}.width(80).height(80).border({width: { left: this.borderWdth, right: 0, top: this.borderWdth, bottom: this.borderWdth },color: '#f00',}).borderRadius({topLeft: this.radiusWdthBig,bottomLeft: this.radiusWdthBig,})Column(){Row().width(this.radiusWdthSmall).height(this.radiusWdthSmall).backgroundColor('#fff').borderRadius({bottomLeft: this.radiusWdthSmall}).border({width: { left: this.borderWdth, right: 0, top: 0, bottom: this.borderWdth },color: '#f00',})Row().width(this.radiusWdthSmall).height(`calc(100% - ${2 * this.radiusWdthSmall}vp)`).border({color: '#ccc',width: { left: 0, right: 1, top: 0, bottom: 0 },style: {right: BorderStyle.Dotted}})Row().width(this.radiusWdthSmall).height(this.radiusWdthSmall).backgroundColor('#fff').borderRadius({topLeft: this.radiusWdthSmall}).border({width: { left: this.borderWdth, right: 0, top: this.borderWdth, bottom: 0 },color: '#f00'})}.height('100%').justifyContent(FlexAlign.SpaceBetween)Column(){Column().width(this.radiusWdthSmall).height(this.radiusWdthSmall).backgroundColor('#fff').borderRadius({bottomRight: this.radiusWdthSmall}).border({width: { left: 0, right: this.borderWdth, top: 0, bottom: this.borderWdth },color: '#f00',})Column().width(this.radiusWdthSmall).height(this.radiusWdthSmall).backgroundColor('#fff').borderRadius({topRight: this.radiusWdthSmall}).border({width: { left: 0, right: this.borderWdth, top: this.borderWdth, bottom: 0 },color: '#f00',})}.height('100%').justifyContent(FlexAlign.SpaceBetween)Column(){Row(){Column(){Text(){Span('新客专享券').fontSize(12)}.fontColor('#fff').margin({bottom: 6})Text(){Span('有效期至2024-8-30').fontSize(10).fontColor('#ddd')}}Stack(){Button('领取').backgroundColor('#f00').height(20).fontSize(12).margin(10)}.height('100%')}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height('100%').width(`calc(100% - ${80 + 2 * this.radiusWdthSmall}vp)`).border({width: { left: 0, right: this.borderWdth, top: this.borderWdth, bottom: this.borderWdth },color: '#f00',}).borderRadius({topRight: this.radiusWdthBig,bottomRight: this.radiusWdthBig,})}.width(300).height(80)// .backgroundColor('#f00').linearGradient({angle: 90,colors: [['rgba(255,0,0,0.7)', 0.0], ['rgba(255,0,0,0.3)', 1]]}).borderRadius(this.radiusWdthBig)}.width('100%').margin({ top: 15 })}
}

2、HarmonyOS flutter des 解密性能很差，希望能提供一个高性能的 des 解密库？

可参考如下三方库三方库参考链接：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fcrypto-js
@ohos/crypto-js使用介绍：https://gitee.com/openharmony-sig/ohos_crypto_js/tree/master#crypto-js
@ohos/crypto-js支持的算法的相关demo链接：https://gitee.com/openharmony-sig/ohos_crypto_js/blob/master/entry/src/main/ets/pages/Index.ets

3、HarmonyOS 按钮下拉列表弹窗？

UI具体实现的效果是，点击按钮在按钮下面下拉一个弹窗，弹窗宽度，高度可以设置，其中高度根据数组长度来调节，其中弹窗每一行的点击事件要能响应

参考popup弹窗：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-popup-V5

代码可以参考：

@Entry
@Component
struct Index {@State handlePopup: boolean = false@State customPopup: boolean = false@State message: string = 'Hello World';@State titleArray: Array<string> = [" 人员信息", " 税票信息"," 扩展权限", " 密码修改"," 登录方式", " 日志上传"," 缓存清理", " 意见反馈"," 隐私安全", " 版本信息"," 注销退出"];@State titleImageArray: Array<string> = ["app.media.more_ry", "app.media.more_sp","app.media.more_qx", "app.media.more_mm","app.media.more_dl", "app.media.more_rz","app.media.more_clean", "app.media.more_fk","app.media.more_ys", "app.media.more_bb","app.media.more_tc"];// popup构造器定义弹框内容@BuilderpopupBuilder() {Column({ space: 2 }) {ForEach(this.titleImageArray,(titleImage:string,index:number)=>{Row(){Image($r(titleImage)).width(40).height(40).margin({ left: -5 })Text(this.titleArray[index]).fontSize(30)}.onClick(()=>{console.log("点击了第"+index+"行")})})}// .width(200)// .height(100).padding(5)}build() {Row() {Column() {Button('点我下方弹窗').backgroundColor(Color.Red).fontColor(Color.White).fontSize('18fp').margin({ top: 0, left: 200 }).onClick(() => {this.customPopup = !this.customPopup}).bindPopup(this.customPopup, {builder: this.popupBuilder,placement: Placement.Top,mask: { color: '#33000000' },popupColor: Color.Black,enableArrow: true,showInSubWindow: false,onStateChange: (e) => {if (!e.isVisible) {this.customPopup = false}}})// .backgroundColor(Color.Black)// .position({ x: 80, y: 300 })//需求/** UI具体实现的效果是，点击按钮在按钮下面下拉一个弹窗，弹窗宽度，高度可以设置，其中高度根据数组长度来调节，* 其中弹窗每一行的点击事件要能响应* 最终效果图放在附件里面，请 查看。谢谢* */}.height('100%').width('100%').margin({ top: 0, left: -10 })}.height('100%')}
}

4、HarmonyOS Scroll组件回调事件onScroll(event: (xOffset: number, yOffset: number) => void)，返回的参数xOffset/yOffset，数据不对？

Scroll组件回调事件onScroll(event: (xOffset: number, yOffset: number) => void)，经测试，返回的xOffset，yOffset数值并不是滚动偏移量，而是滚动速度

调用Scroll组件回调函数onScroll，获取参数yOffset
获取到的数值发现与滚动偏移量无关，且经常为负数，经验证数值为滚动速度

onscroll事件会丢失精度，建议用currentOffset来获取当前的滚动偏移量实现吸顶效果，代码如下：

.onScroll((xOffset: number, yOffset: number) => {// console.log(yOffset.toString())// this.scrollY += yOffset// this.tabPosY = this.topAreaHeight - this.scrollY <= 0 ? 0 : this.topAreaHeight - this.scrollYthis.tabPosY = this.topAreaHeight - this.scroller.currentOffset().yOffset <= 0 ? 0 : this.topAreaHeight - this.scroller.currentOffset().yOffset// console.log(TAG, `Scrollview is scrolling, scrollY: ${this.scrollY}, tabPosY: ${this.tabPosY}`);
})