OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制

素年锦时静待君丶
发布于 2023-4-14 15:29
浏览
2收藏

版本:v3.2 Release

边框设置

设置组件边框样式。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

从API Version 9开始,父节点的border显示在子节点内容之上。

属性

名称

参数类型

描述

border

{

width?: ​​Length​​​ | ​​EdgeWidths​9+,

color?:  ​​ResourceColor​​​ | ​​EdgeColors​9+,

radius?:  ​​Length​​​ | ​​BorderRadiuses​9+,

style?: ​​BorderStyle​​​ | ​​EdgeStyles​9+

}

统一边框样式设置接口。

- width:设置边框宽度。

- color:设置边框颜色。

- radius:设置边框圆角半径。

- style:设置边框样式。

borderStyle

​BorderStyle​​​ | ​​EdgeStyles​9+

设置元素的边框样式。

默认值:BorderStyle.Solid

从API version 9开始,该接口支持在ArkTS卡片中使用,卡片中仅支持设置相同的边框样式。

borderWidth

​Length​​​ | ​​EdgeWidths​9+

设置元素的边框宽度,不支持百分比。

从API version 9开始,该接口支持在ArkTS卡片中使用,卡片中仅支持设置相同的边框宽度。

borderColor

​ResourceColor​​​ | ​​EdgeColors​9+

设置元素的边框颜色。

默认值:Color.Black

从API version 9开始,该接口支持在ArkTS卡片中使用,卡片中仅支持设置相同的边框颜色。

borderRadius

​Length​​​ | ​​BorderRadiuses​9+

设置元素的边框圆角半径,不支持百分比。

从API version 9开始,该接口支持在ArkTS卡片中使用,卡片中仅支持设置相同的边框圆角半径。

EdgeWidths9+对象说明

引入该对象时,至少传入一个参数。

名称

参数类型

必填

描述

left

​Length​

左侧边框宽度。

right

​Length​

右侧边框宽度。

top

​Length​

上侧边框宽度。

bottom

​Length​

下侧边框宽度。

EdgeColors9+对象说明

引入该对象时,至少传入一个参数。

名称

参数类型

必填

描述

left

​ResourceColor​

左侧边框颜色。

right

​ResourceColor​

右侧边框颜色。

top

​ResourceColor​

上侧边框颜色。

bottom

​ResourceColor​

下侧边框颜色。

BorderRadiuses9+对象说明

引用该对象时,至少传入一个参数。

名称

参数类型

必填

描述

topLeft

​Length​

左上角圆角半径。

topRight

​Length​

右上角圆角半径。

bottomLeft

​Length​

左下角圆角半径。

bottomRight

​Length​

右下角圆角半径。

EdgeStyles9+对象说明

引入该对象时,至少传入一个参数。

名称

参数类型

必填

描述

left

​BorderStyle​

左侧边框样式。

right

​BorderStyle​

右侧边框样式。

top

​BorderStyle​

上侧边框样式。

bottom

​BorderStyle​

下侧边框样式。

示例

// xxx.ets
@Entry
@Component
struct BorderExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段
        Text('dashed')
          .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线
        Text('dotted')
          .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.border')
        .fontSize(50)
        .width(300)
        .height(300)
        .border({
          width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },
          color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区

图片边框设置

设置容器组件的图片边框样式。

说明:

从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

描述

borderImage

​BorderImageOption​

图片边框或者渐变色边框设置接口。

该接口支持在ArkTS卡片中使用。

BorderImageOption对象说明

该接口支持在ArkTS卡片中使用。

名称

类型

描述

source

string | ​​Resource​​​ | ​​linearGradient​

边框图源或者渐变色设置。

说明: 边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。

slice

​Length​​​ | ​​EdgeWidths​

设置图片边框切割宽度。

默认值:0

width

​Length​​​ | ​​EdgeWidths​

设置图片边框宽度。

默认值:0

outset

​Length​​​ | ​​EdgeWidths​

设置边框图片向外延伸距离。

默认值:0

repeat

​RepeatMode​

设置边框图片的重复方式。

默认值:RepeatMode.Stretch

fill

boolean

设置边框图片中心填充。

默认值:false

RepeatMode枚举说明

该接口支持在ArkTS卡片中使用。

名称

描述

Repeat

被切割图片重复铺平在图片边框上,超出的部分会被剪裁。

Stretch

被切割图片以拉伸填充的方式铺满图片边框。

Round

被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。

Space

被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。

示例

示例1

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200)
          .borderImage({
            source: {
              angle: 90,
              direction: GradientDirection.Left,
              colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
            },
            slice: { top: 10, bottom: 10, left: 10, right: 10 },
            width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
            repeat: RepeatMode.Stretch,
            fill: false
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区

示例2

// xxx.ets
@Entry
@Component
struct Index {
  @State outSetValue: number = 40

  build() {
    Row() {
      Column() {
        Row() {
          Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
        }
        .borderImage({
          source: $r('app.media.icon'),
          slice: `${this.outSetValue}%`,
          width: `${this.outSetValue}px`,
          outset: '5px',
          repeat: RepeatMode.Repeat,
          fill: false
        })

        Slider({
          value: this.outSetValue,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .margin({ top: 30 })
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValue = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区

背景设置

设置组件的背景样式。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

描述

backgroundColor

​ResourceColor​

设置组件的背景色。

从API version 9开始,该接口支持在ArkTS卡片中使用。

backgroundImage

src: ​​ResourceStr​​,

repeat?: ​​ImageRepeat​

src:图片地址,支持网络图片资源地址和本地图片资源地址和Base64,不支持svg类型的图片。

repeat:设置背景图片的重复样式,默认不重复。当设置的背景图片为透明底色图片,且同时设置了backgroundColor时,二者叠加显示,背景颜色在最底部。

从API version 9开始,该接口支持在ArkTS卡片中使用。

backgroundImageSize

{

width?: ​​Length​​,

height?: ​​Length​​​} | ​​ImageSize​

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

width和height取值范围: [0, +∞)

默认值:ImageSize.Auto

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

设置为小于0的值时,按值为0显示。当设置了height未设置width时,width根据图片原始宽高比进行调整。

backgroundImagePosition

​Position​​​ | ​​Alignment​

设置背景图在组件中显示位置,即相对于组件左上角的坐标。

默认值:

{

x: 0,

y: 0

}

x和y值设置百分比时,偏移量是相对组件自身宽高计算的。

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

// xxx.ets
@Entry
@Component
struct BackgroundExample {

  build() {
    Column({ space: 5 }) {
      Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })

      Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
        .backgroundImageSize({ width: '250px', height: '140px' })
        .width('90%')
        .height(70)
        .border({ width: 1 })

      Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
        .backgroundImageSize({ width: '500px', height: '120px' })
        .width('90%')
        .height(100)
        .border({ width: 1 })

      Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%').height(150)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 500 })
        .border({ width: 1 })

      Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 不保准图片完整的情况下占满盒子
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)
        .border({ width: 1 })

      Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 保准图片完整的情况下放到最大
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Contain)
        .border({ width: 1 })

      Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 560 })
        .backgroundImagePosition({ x: -500, y: -300 })
        .border({ width: 1 })
    }
    .width('100%').height('100%').padding({ top: 5 })
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区

透明度设置

设置组件的透明度。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

描述

opacity

number | ​​Resource​

元素的不透明度,取值范围为0到1,1表示不透明,0表示完全透明, 达到隐藏组件效果,但是在布局中占位。

说明:

子组件可以继承父组件的此属性。默认值:1

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

// xxx.ets
@Entry
@Component
struct OpacityExample {
  build() {
    Column({ space: 5 }) {
      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE)
      Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
      Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区

显隐控制

控制组件是否可见。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

描述

visibility

​Visibility​

控制当前组件显示或隐藏。注意,即使组件处于隐藏状态,在页面刷新时仍存在重新创建过程,因此当对性能有严格要求时建议使用​​条件渲染​​代替。

默认值:Visibility.Visible

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

// xxx.ets
@Entry
@Component
struct VisibilityExample {
  build() {
    Column() {
      Column() {
        // 隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 隐藏参与占位
        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 正常显示,组件默认的显示模式
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}

OpenHarmony应用开发-边框/图片边框/背景/透明度设置及显隐控制-鸿蒙开发者社区



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md/​

已于2023-4-14 15:29:27修改
1
收藏 2
回复
举报
回复
    相关推荐