想要实现的效果,设置一个布局如 vstack,设置圆角50%程圆形状,填充背景色实现背景渐变,裁剪超出边框部分的内容。代码如下:
{
type: ' vstack',
props: {
background: {
type: 'gradient',
props: {
startPoint: $point(0, 0),
endPoint: $point(0, 1),
colors: [$color('#000',$color('#fff'))],
},
},
cornerRadius: {
value: 30 / 2,
style: 1, // 0: circular, 1: continuous
},
clipped: true,
frame: {
width:30
height: 30,
},
},
}
测试呈现的结果:
1.显示的是一个方形渐变;(这里可否理解为背景色是填充了整个视图背景,设置的圆角其实已经生效,但是因为没有内容所以圆角没有生效呢)
2.测试了图片的效果和上面一样;(圆角对image生效,但是如果设置了image视图的背景和圆角,显示的是一个方形里面存在一个圆形图片)
所得结果:
cornerRadius 这个通用属性对图片生效,改变的是图片的形状或者说感觉像是把图片裁剪了。它可能不能适用于所有的视图。