1# 透明度设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件的透明度。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## opacity 16 17opacity(value: number | Resource): T 18 19设置组件的不透明度。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 31| value | number \| [Resource](ts-types.md#resource) | 是 | 元素的不透明度，取值范围为0到1，若设置的值小于0时，则取值为0，若设置的值大于1时，则取值为1，1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。 <br> 默认值：1 <br/>**说明：** <br/> 子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。 | 32 33**返回值：** 34 35| 类型 | 说明 | 36| ------ | ------------------------ | 37| T | 返回当前组件。 | 38 39## opacity<sup>18+</sup> 40 41opacity(opacity: Optional\<number | Resource>): T 42 43设置组件的不透明度。与[opacity](#opacity)相比，opacity参数新增了对undefined类型的支持。 44 45**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 46 47**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 55| opacity | Optional\<number \| [Resource](ts-types.md#resource)> | 是 | 元素的不透明度，取值范围为0到1，若设置的值小于0时，则取值为0，若设置的值大于1时，则取值为1，1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。 <br/> 默认值：1 <br/>**说明：** <br/> 子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。<br/>当opacity的值为undefined时，恢复为默认不透明度为1的状态。 | 56 57**返回值：** 58 59| 类型 | 说明 | 60| ------ | ------------------------ | 61| T | 返回当前组件。 | 62 63 64## 示例 65 66该示例主要显示通过opacity设置组件的不透明度。 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct OpacityExample { 73 build() { 74 Column({ space: 5 }) { 75 Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC) 76 Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE) 77 Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC) 78 Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) 79 Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) 80 Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) 81 Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC) 82 Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE) 83 Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC) 84 Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE) 85 } 86 .width('100%') 87 .padding({ top: 5 }) 88 } 89} 90``` 91 92 93
