一、实例代码:
border(params)
接收一个对象参数,对象参数的属性为width?: Lenght,color?:ResourceColor ,radius?: Length,style?: BorderStyle
注意:以下实例包含了我说知道的 边框的单位 以及 颜色 的各种用法
Column() {
Image(item.img)
.width(120)
.height(80)
.objectFit(ImageFit.Contain)
Text(item.title)
.height(20)
.margin({ top:10 })
}
.width('50%')
.padding({top:10, bottom:10})
.border({
width:{top:1, left:1, right:1, bottom:1},
color:0xCCCCCC
})
当然边框颜色也是可以独立设置的如:
.border({
width: { left: '1px', right: '1px', top: '1px', bottom: '1px' },
color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
})
二、学习中遇到的问题以及需求 (内含更高阶的用法)
1、需求
需要给推荐商品列表添加边框, arkTS的边框跟前端css一样效果,如果出现重叠也会加粗,如下图
可以明显看到中间重叠的边框比较粗,所以不能每个容器都加上四边的边框, 只能分比给每个加左边框,上边框, 然后第二列加右边框, 最后一行加下边框
2、整部分代码:重点看border
// 推荐列表
Row() {
Flex({wrap: FlexWrap.Wrap}) {
ForEach(this.utils, (item:ModuleItem, i) => {
Column() {
Image(item.img)
.width(120)
.height(80)
.objectFit(ImageFit.Contain)
Row() {
Text(item.title + item.title)
.width('100%')
}
.height(20)
.margin({ top:10 })
Row() {
Text('价格:')
Text('$ 30')
.width('100%')
.fontColor(Color.Red)
}
.height(20)
.margin({ top:10 })
}
.width('50%')
.padding({top:10, bottom:10})
.border({
width:{top:1, left:1, right:i % 2 == 1 ? 1 : 0, bottom:i == this.utils.length - 1 || i == this.utils.length - 2 ? 1 : 0},
color:0xCCCCCC
})
.onClick(() => {
router.pushUrl({
url:item.path,
params:{
id:item.id
}
}, router.RouterMode.Single)
})
},item => item.id)
}
.padding(10)
.backgroundColor('#fff')
.borderRadius(10)
}
.width('100%')
.padding({right:15, left:15})
.margin({top:20})
3、效果
三、官方:
1、官方实例以及效果图
可以看看官方的实例,官方的实例是四边一起,属性链式的形式的形式设置的
// 线段
Text('dashed')
.borderStyle(BorderStyle.Dashed)
.borderWidth(5)
.borderColor(0xAFEEEE)
.borderRadius(10)
// 点线
Text('dotted')
.border({
width: 5,
color: 0x317AF7,
radius: 10,
style: BorderStyle.Dotted
})