border语法格式如下:
要实现如下效果:
代码如下:
@Entry
@Component
struct IndexTest {
@State message: string = 'IndexTest';
build() {
Column(){
Text('border实现')
.fontSize(30)
.border({
width:4,
color:Color.Red,
style:BorderStyle.Solid,
radius:10
})
.padding(15)
}.width('100%')
}
}
鸿蒙的强大远不止于此处,还可以实现单边框,就是说变宽的四个角、四个边都可以随意改成想要的颜色样式,改四个变宽语法width:{left:6,right:8,top:8,bottom:8},同理改颜色color:{left:Color.Black,right:Color.Red,top:Color.Pink,bottom:Color.Green},如图效果:
代码如下:
Text('单边框') .fontColor(Color.Red) .fontSize(50) .padding(8) .border({ width:{ left:6, right:8, top:8, bottom:8 }, color:{ left:Color.Black, right:Color.Red, top:Color.Pink, bottom:Color.Green }, style:{ left:BorderStyle.Dotted, right:BorderStyle.Solid, top:BorderStyle.Dashed, bottom:BorderStyle.Dotted }