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

素年锦时静待君丶

发布于 2023-4-14 15:29

浏览

2收藏

版本：v3.2 Release

边框设置

设置组件边框样式。

说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
从API Version 9开始，父节点的border显示在子节点内容之上。

属性

名称	参数类型	描述
border	{ width?: Length \| EdgeWidths⁹⁺, color?: ResourceColor \| EdgeColors⁹⁺, radius?: Length \| BorderRadiuses⁹⁺, style?: BorderStyle \| EdgeStyles⁹⁺ }	统一边框样式设置接口。 - width：设置边框宽度。 - color：设置边框颜色。 - radius：设置边框圆角半径。 - style：设置边框样式。
borderStyle	BorderStyle \| EdgeStyles⁹⁺	设置元素的边框样式。默认值：BorderStyle.Solid 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框样式。
borderWidth	Length \| EdgeWidths⁹⁺	设置元素的边框宽度，不支持百分比。从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框宽度。
borderColor	ResourceColor \| EdgeColors⁹⁺	设置元素的边框颜色。默认值：Color.Black 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框颜色。
borderRadius	Length \| BorderRadiuses⁹⁺	设置元素的边框圆角半径，不支持百分比。从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框圆角半径。

EdgeWidths⁹⁺对象说明

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

名称	参数类型	必填	描述
left	Length	否	左侧边框宽度。
right	Length	否	右侧边框宽度。
top	Length	否	上侧边框宽度。
bottom	Length	否	下侧边框宽度。

EdgeColors⁹⁺对象说明

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

名称	参数类型	必填	描述
left	ResourceColor	否	左侧边框颜色。
right	ResourceColor	否	右侧边框颜色。
top	ResourceColor	否	上侧边框颜色。
bottom	ResourceColor	否	下侧边框颜色。

BorderRadiuses⁹⁺对象说明

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

名称	参数类型	必填	描述
topLeft	Length	否	左上角圆角半径。
topRight	Length	否	右上角圆角半径。
bottomLeft	Length	否	左下角圆角半径。
bottomRight	Length	否	右下角圆角半径。

EdgeStyles⁹⁺对象说明

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

名称	参数类型	必填	描述
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)
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

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%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

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%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

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 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

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 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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

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

分类

卡片开发

三方库

标签

OpenHarmony

已于2023-4-14 15:29:27修改

51CTO

51CTO博客

51CTO学堂

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

边框设置

属性

EdgeWidths⁹⁺对象说明

EdgeColors⁹⁺对象说明

BorderRadiuses⁹⁺对象说明

EdgeStyles⁹⁺对象说明

示例

图片边框设置

属性

BorderImageOption对象说明

RepeatMode枚举说明

示例

示例1

示例2

背景设置

属性

示例

透明度设置

属性

示例

显隐控制

属性

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

边框设置

属性

EdgeWidths9+对象说明

EdgeColors9+对象说明

BorderRadiuses9+对象说明

EdgeStyles9+对象说明

示例

图片边框设置

属性

BorderImageOption对象说明

RepeatMode枚举说明

示例

示例1

示例2

背景设置

属性

示例

透明度设置

属性

示例

显隐控制

属性

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

EdgeWidths⁹⁺对象说明

EdgeColors⁹⁺对象说明

BorderRadiuses⁹⁺对象说明

EdgeStyles⁹⁺对象说明