下面我来告诉你如何在ArkTS中设置单边边框

效果如下:

 顶部组件,只有底部才有绿色边框

代码示例:

Row(){//顶部栏  Text("理  论  街  道")    .fontSize('32').layoutWeight(8)  Image('/pictures/search.jpg')//右上角插入的图标,与案例无关,可以无视    .layoutWeight(2)}.width('100%').height('10%').border({  width: {bottom: '30lpx' },//可以看到我们只填写了botton一个属性  color: {bottom: Color.Green },})

总结:

由此可见,我们只需要在border中,对width等属性书写具体的位置.

如果我们需要其它边框,可以继续补充left,right,top,如果不写,则默认四边框全部存在

.border({     width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },     color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },})

可供参考的官方文档:

华为鸿蒙开发-边框设置:文档中心

可供参考的优秀博客:OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-开源基础软件社区-51CTO.COM