1# 前景色设置 2 3设置组件的前景色。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 属性 10 11| 名称 | 参数类型 | 描述 | 12| -------- | -------- | -------- | 13| foregroundColor | [ResourceColor](ts-types.md#resourcecolor) \| [ColoringStrategy<sup>10+</sup>](ts-types.md#coloringstrategy10) | 设置组件的前景颜色或者根据智能取色策略设置前景颜色。 | 14 15## 示例 16 17### 示例1 18```ts 19// xxx.ets 20@Entry 21@Component 22struct ForegroundColorExample { 23 build() { 24 Column({ space: 100 }) { 25 // 绘制一个直径为150的圆,默认填充色为黑色 26 Circle({ width: 150, height: 200 }) 27 // 绘制一个直径为150的圆， 28 Circle({ width: 150, height: 200 }).foregroundColor(Color.Red) 29 }.width('100%').backgroundColor(Color.Blue) 30 } 31} 32``` 33 34 35 36### 示例2 37 38```ts 39// xxx.ets 40@Entry 41@Component 42struct ColoringStrategyExample { 43 build() { 44 Column({ space: 100 }) { 45 // 绘制一个直径为150的圆,默认填充色为黑色 46 Circle({ width: 150, height: 200 }) 47 // 绘制一个直径为150的圆，设置前景色为组件背景色的反色 48 Circle({ width: 150, height: 200 }) 49 .backgroundColor(Color.Black) 50 .foregroundColor(ColoringStrategy.INVERT) 51 }.width('100%') 52 } 53} 54``` 55 56 57### 示例3 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct foregroundColorInherit { 64 build() { 65 Column() { 66 Button('设置前景色为橘色').fontSize(20).foregroundColor(Color.Orange).backgroundColor(Color.Gray) 67 Divider() 68 Button('未设置前景色继承自父组件').fontSize(20).backgroundColor(Color.Gray) 69 }.foregroundColor(Color.Red) 70 } 71} 72``` 73 74
