鸿蒙开发之组件border属性

最新推荐文章于 2024-07-03 10:08:04 发布

Lu_Ca

最新推荐文章于 2024-07-03 10:08:04 发布

阅读量1.2k

点赞数 10

分类专栏：鸿蒙开发文章标签：鸿蒙

本文链接：https://blog.csdn.net/Lu_Ca/article/details/135474096

版权

鸿蒙开发专栏收录该内容

42 篇文章 9 订阅

订阅专栏

@Entry
@Component
struct OfficialBorderPage {

  build() {
    Row() {
      Column() {
        Row() {
          Text('border style')
            //文本border属性设置
            .border({
              width: {
                left:3,
                right:10,
                top:5,
                bottom:1
              },
              radius:{
                bottomLeft:3,
                topRight:15
              },
              style:{
                top:BorderStyle.Dashed,
                right:BorderStyle.Dotted,
                bottom:BorderStyle.Solid
              },
              color:{
                top: Color.Red,
                bottom: Color.Green,
                left: Color.Orange
              }
            })
              //也可以这样设置
              // .borderStyle(BorderStyle.Dashed)
              // .borderColor(Color.Red)
              // .borderRadius({'topLeft':13,'topRight':8,'bottomLeft':5})
              // .borderWidth(3)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .margin({left:20})
        }
        .width('80%')
        .height('50%')
        .backgroundColor(Color.Yellow)
        .borderWidth(10)
        //Row组件的borderImage属性设置图片或渐变边框
        //仅适用于容器组件，如Row、Column、Flex，在非容器组件上使用会失效。
        .borderImage({
          source:{
            angle: 90,
            direction: GradientDirection.Bottom,
            colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
          },
          slice: { top: 10, bottom: 10, left: 10, right: 10 },
          repeat: RepeatMode.Stretch,
          outset:{top:40,left:0,right:20,bottom:10},
          fill: false
        })

      }
      .width('100%')

    }
    .height('100%')
  }
}