如何自定义组件原型菜单

自定义组件原型菜单

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组件
800浏览 • 1回复 待解决
ArkTs如何自定义容器组件
2951浏览 • 1回复 待解决
自定义组件如何导出、引入?
2186浏览 • 1回复 待解决
自定义组件嵌套子组件
9309浏览 • 3回复 待解决
自定义组件如何添加图片?
2496浏览 • 1回复 待解决
如何设置自定义组件height缺省
1770浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
324浏览 • 1回复 待解决
js 自定义组件如何传递方法?
5778浏览 • 2回复 待解决
HarmonyOS如何自定义组件的Controller?
181浏览 • 1回复 待解决
HarmonyOS如何手动重置自定义组件
230浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
253浏览 • 1回复 待解决
HarmonyOS自定义组件增加方法如何实现
304浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
2239浏览 • 1回复 待解决
swiper组件如何实现自定义切换动画
603浏览 • 1回复 待解决