【HarmonyOS 鸿蒙 黑马程序员 学习笔记 30.1】

圆角

.borderRadius(35)
.borderRadius({topLeft:35,topRight:0,bottomLeft:0,bottomRight:35})

0值可空,这里只是演示

正圆

先设置正方形,再写圆角值
高除以2就是圆角值

胶囊(半圆)

所谓的胶囊其实就是半圆
Y轴两头半圆,就是 height (高) 除以2
X轴两头半圆,就是 width (宽) 除以2

背景

背景图片不接受SVG图

背景图片

.backgroundImage()

背景图平铺

.backgroundImage(图片地址,ImageRepeat.XY)

X轴Y轴都进行平铺

背景图大小

.backgroundImageSize(ImageSize.Contain)

Cover 重点是铺满容器
Contain 重点是图片完整展示

.backgroundImageSize({width:1000,height:1000})

width 和 height 可填值 可填百分比
具有拉伸效果

背景图位置

.backgroundImagePosition({x:-10,y:10})

可调整背景图的位置,xy可接受负值

背景模糊

.backdropBlur(5)

填值越高越模糊

简易演示代码

本文是简化记录,代替不了原片详细及官方资料
如想更详细的了解,请看原片,参考官方资料
(官方资料有点看不懂,示例写的很好很详细)

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      Text('演示 borderRadius')
        .fontSize(40)
        .border({width:2,color:Color.Orange})
        .padding(20)
        .borderRadius({topLeft:35,bottomRight:35}) // 数值越大越圆 设置上左 下右圆角

      Row(){
        Image($r('app.media.ic_celiakeyboard_menu'))
          .width(50) //  宽高做正方形,便于后期做圆,数值要能被2除尽
          .height(50)
          .border({width:2,color:Color.Orange}) //  设置边框宽,颜色
          .borderRadius(25) //  正方形圆角是宽高的一半,变圆
          .padding(10)  //  内距10  由于限定了外框大小,会导致内容缩小
          .margin(10) // 外距10 与其他组件间隔10
          .backgroundColor(Color.Gray)  //  子容器没有背景色 会跟随父容器背景色
          .fillColor(Color.Brown) //  设置SVG线条颜色
        Text('左边演示正圆,整体演示胶囊形状')
      }
      .width(340)
      .height(80)
      .border({width:2,color:Color.Red})  //  先画边框
      .padding({left:10,right:10})  //  边框离字太近,加内距
      .borderRadius(40) //  不清楚大小,去设置宽高,再用高除2得圆角值,大于好像也是圆角
      .backgroundColor(Color.Pink)  //  父容器和子容器背景颜色设置不一样以便区分
    }
    .width('100%')
    .height('100%')
    .backgroundImage(
      'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0603public/sj-next-pc.jpeg',
      ImageRepeat.XY  //  X轴Y轴都进行平铺 这里我传入的是一张超大图片,不会进行平铺
    )
    .backgroundImageSize(ImageSize.Contain) //  Cover重点是铺满容器  Contain重点是图片完整展示
    .backgroundImageSize({width:1000,height:1000})  //  背景图大小 填百分比就是容器的百分比
    .backgroundImagePosition(Alignment.Center)  //  背景图位置居中
    .backgroundImagePosition({x:-10,y:10}) //  背景图向右偏移10 证明负值是可以作为参数 向下偏移10
    .backdropBlur(5)  //  背景模糊  填值越高越模糊
    //.backgroundImageSize(ImageSize.FILL)

    .justifyContent(FlexAlign.SpaceEvenly)  //  线性布局对齐方式
  }
}