如何自定义组件原型菜单

自定义组件原型菜单

HarmonyOS
2024-05-26 16:10:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pumayze

本文自定义一个圆形菜单,这个菜单栏的每个Item环形排布。

使用的核心API

  •  onLayout
  •  onMeasure

核心代码解释

先定义组件CustomLayout,再通过onMeasure与onLayout对菜单项进行尺寸丈量和布局,我们先看看丈量尺寸的代码具体如下

  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 
    //获取布局最大尺寸 
    let maxWidth = px2vp(constraint.maxWidth as number); 
    let maxHeight = px2vp(constraint.maxHeight as number); 
    //获取半径 
    this.mRadius = Math.min(maxWidth,maxHeight); 
    //设置子布局大小 
    this.childSize = this.mRadius * this.DEFAULT_CHILD_DIMENSION-20; 
    this.mPadding = this.mRadius * this.PADDING_LAYOUT 
    children.forEach((child) => { 
      //对子布局进行测量 
      child.measure({ minHeight:this.childSize, minWidth: this.childSize, maxWidth: this.childSize, maxHeight: this.childSize  }) 
    }) 
  }

代码比较简单,就是先获取父布局的最大尺寸,然后测量每个菜单项的尺寸。尺寸获取后就是到了布局这一步了,这也是整个圆形菜单的核心。具体代码如下。

onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 
    //获取子布局个数 
    const childCount = children.length; 
    //根据menu item计算item的布局占用的角度 
    const angleDelay = 360 / childCount; 
    children.forEach((child) => { 
      this.mStartAngle %= 360; 
      //计算,中心点到menu item中心的距离 
      let distanceFromCenter = this.mRadius / 2  - this.childSize / 2 - this.mPadding; 
      console.info('CustomLayout onLayout === '+ this.mStartAngle) 
      let left = this.mRadius /2 + Math.round(distanceFromCenter *Math.cos(this.mStartAngle * Math.PI / 180) - this.childSize / 2) 
      let top = this.mRadius /2 + Math.round(distanceFromCenter * Math.sin(this.mStartAngle * Math.PI / 180) - this.childSize / 2) 
      child.layout({ position: { x:left, y: top }, constraint: constraint }) 
      this.mStartAngle += angleDelay; 
    }) 
  }

onLayout函数看起来稍微复杂,但它的含义就是将所有子项按照圆弧的形式布局。整个圆为360°,如果每个子项占用的角度为60°,第一个就是0~60,第二个就是60°~120°,以此类推将所有的子项按照圆形布局。

实现效果

分享
微博
QQ
微信
回复
2024-05-27 21:33:05
相关问题
如何自定义模拟Tabs组件
363浏览 • 1回复 待解决
ArkTs如何自定义容器组件
1542浏览 • 1回复 待解决
自定义组件如何导出、引入?
819浏览 • 1回复 待解决
自定义组件嵌套子组件
7837浏览 • 3回复 待解决
如何设置自定义组件height缺省
491浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4524浏览 • 2回复 待解决
自定义组件如何添加图片?
1106浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
802浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
7158浏览 • 1回复 待解决
自定义弹窗自定义转场动画
382浏览 • 1回复 待解决
JAVA卡片怎么用自定义组件
4779浏览 • 1回复 待解决
自定义组件是否支持renderFit属性
535浏览 • 1回复 待解决
自定义组件如何增加自己的对外方法
591浏览 • 1回复 待解决
如何访问自定义文件?
317浏览 • 1回复 待解决
如何自定义Component 属性
13364浏览 • 3回复 待解决
Grid组件的scrollBar是否支持自定义
803浏览 • 1回复 待解决
自定义组件什么时候销毁
591浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人