# 如何实现覆盖状态栏的渐变背景效果

#### 问题现象

为了避免状态栏颜色与背景重合，需根据状态栏和内容区域的颜色进行沉浸式适配。在设置内容区域背景色时，需要设置颜色从右向左线性渐变。如何实现上述效果？

#### 效果预览

#### 背景知识

*   沉浸式页面开发常通过将应用页面延伸到状态栏的方式，来最大程度利用屏幕可视区域，使页面获得更大的布局空间。为了实现该效果，可通过对顶部组件使用expandSafeArea属性扩展安全区域属性。
*   linearGradient属性设置组件的颜色渐变效果，颜色渐变属于组件内容，绘制在背景上方。

#### 解决方案

1.  沉浸式页面开发将应用页面延伸到状态栏。对页面中顶部组件使用expandSafeArea属性扩展安全区域属性。
2.  通过linearGradient来实现组件的颜色线性渐变。

完整示例参考如下：

```
@Entry
@Component
struct Linear {
  build() {
    Column() {
      Column() {
        Text('顶部渐变')
          .textAlign(TextAlign.Center)
          .fontSize(40)
          .width('100%')
      }
      .backgroundColor('#F08080')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
      .linearGradient({
        // 实现从左到右，默认为垂直。90°为水平
        angle: 90,
        colors: [[0x8981F4, 0.0], [0x86C4E3, 0.3], [0x63CEBF, 1.0]]
      })
    }
    .width('100%')
    .height('100%')
  }
}
```