当前位置： 首页 > article >正文

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

article 2024/12/26 21:58:09
1、HarmonyOS 如何实现券组件的挖空样式？

参考demo：

// xxx.ets
@Entry
@Component
struct ShapeExample {
  private borderWdth: number = 2;
  private radiusWdthSmall: number = 8
  private radiusWdthBig: number = 10
  build() {
    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构造器定义弹框内容
  @Builder
  popupBuilder() {
    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.scrollY
  this.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}`);
})
5、HarmonyOS 时间没有isAfter属性么，如何判断当前时间是否是目标时间之后呢？

date.isAfter(new Date(2024, 7, 1)),这种时间没有isAfter属性么，如果我想判断当前时间是否是这个时间之后呢？

可以使用getTime()函数将日期转换为时间戳然后和当前时间戳做差，如果大于0说明当前时间在2024-7-1 0点之前小于0则在0点之后如果是检测在2024-7-1 0点到23点59分之间（即在当天），可以将当前时间和2024-7-1 0点和2号0点分别做对比以判断当前时间所在区间


http://www.kler.cn/a/452694.html

相关文章：

  • git设置项目远程仓库指向github的一个仓库
  • nginx-rtmp服务器搭建
  • 赛博错题本
  • 层序遍历练习
  • .NET常用的ORM框架及性能优劣分析总结
  • adb无法连接到安卓设备【解决方案】报错：adb server version (40) doesn‘t match this client (41)；
  • wordpress网站用token登入开发过程
  • Idean 处理一个项目引用另外一个项目jar 但jar版本低的问题
  • 3D几何建模引擎Parasolid功能解析
  • dify的ChatFlow自定义上传图片并通过HTTP请求到SpringBoot后端
  • STM32F407 | Embedded IDE01 - vscode搭建Embedded IDE开发环境（支持JLINK、STLINK、DAPLINK）
  • DevOps实战：用Kubernetes和Argo打造自动化CI/CD流程（1）
  • Golang框架实战-KisFlow流式计算框架(9)-Cache/Params 数据缓存与数据参数
  • opencv中的色彩空间
  • 4.2 数据库分组查询
  • 机器学习(二)-简单线性回归
  • DVWA第二关 之命令注入
  • 怎么将PDF压缩大小？PDF文件进行压缩的几个方法推荐
  • css文字折行以及双端对齐实现方式
  • 面试题整理17----K8s中request和limit资源限制是如何实现的
  • 机器学习基础 衡量模型性能指标
  • 如何用PhpStudy搭建网络安全靶场
  • 数据结构-树（二叉树）
  • 不用电脑也不用编程，实现PLC、智能仪表对接SQL数据库的方案
  • Dataset Distillation with Attention Labels for Fine-tuning BERT
  • SpringAI人工智能开发框架005---SpringAI文本转语音_语音转文本_音频翻译程序接口编写_英文音频翻译_中文音频翻译_指定模型