【HarmonyOS 5.0】实现带圆角的梯形

【需求】

【问题描述】

1. 同事做鸿蒙化需求时，被要求实现如上图效果，没有UI图，安卓同事也找不到对应素材。
2. 只能同事自己想办发解决，找我问能不能做这效果，刚好前段时间帮另一个同事实现三角形效果，在三角型的基础上加上圆角效果，要就能实现

【解决方案】

1. 使用clipShape，传入PathShape，编写commands就能实现

【代码】

import { PathShape } from '@kit.ArkUI'@Entry
@Component
struct ClipShapeCircle {build() {Column() {Row() {Row() {Text('主标题').fontColor(Color.White).height(60).padding({ left: 20 })}Row() {Text('副标题').fontColor(Color.White).margin({ left: 50 })}.backgroundColor(Color.Green).width(200).height(50).clipShape(new PathShape().commands(`M0 0L${vp2px(180)} 0S${vp2px(200)} 0 ${vp2px(200)} ${vp2px(20)}V${vp2px(50)}H${vp2px(50)}S${vp2px(33)} ${vp2px(50)} ${vp2px(30)} ${vp2px(40)}L${vp2px(15)} ${vp2px(8)}S${vp2px(15)} 0 0 0Z`))}.backgroundColor(Color.Orange).width('100%').height(60).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Top).borderRadius({topLeft: 20,topRight: 20})}.height('100%').width('100%').padding({ top: 80 })}
}

【效果图】