# 如何解决标题栏颜色渐变导致标题栏控件不显示的问题

#### 问题现象

实现标题栏颜色渐变，导致标题栏内部的控件不展示。

如下所示，页面上滑过程中，标题栏会逐渐透明，导致标题栏组件中头像图片和扫一扫图片也不显示。

问题效果预览：

问题代码示例参考如下：

```
@Entry
@Component
struct tabTopScrolls {
  private tabController: TabsController = new TabsController();
  @State arr: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8', '9',];
  @State opacityNum: number = 1;
  @State scrollSum: number = 0;
  @State currentIndex: number = 0;

  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
        Image($r('app.media.startIcon')) // 资源文件需自行替换
          .width(30)
          .height(30)
          .borderRadius(8);
        Image($r('app.media.startIcon')) // 资源文件需自行替换
          .width(30)
          .height(30);
      }
      .padding({
        top: 8,
        bottom: 8,
        right: 16,
        left: 16
      })
      .opacity(this.opacityNum)
      .backgroundColor('#82abcb')
      .position({ x: 0, y: 0 })
      .zIndex(99);

      // tab内容
      Tabs({ barPosition: BarPosition.End, controller: this.tabController }) {
        TabContent() {
          this.listControllerBuilder();
        }.tabBar(this.tabBuilder(0, '手机'));

        TabContent() {
          Column() {
            Text('发现的内容');
          }.width('100%').height('100%').backgroundColor('#007DFF').justifyContent(FlexAlign.Center);
        }.tabBar(this.tabBuilder(1, '宽带'));

        TabContent() {
          Column() {
            Text('推荐的内容');
          }.width('100%').height('100%').backgroundColor('#FFBF00').justifyContent(FlexAlign.Center);
        }.tabBar(this.tabBuilder(2, '家庭'));

        TabContent() {
          Column() {
            Text('我的内容');
          }.width('100%').height('100%').backgroundColor('#E67C92').justifyContent(FlexAlign.Center);

        }.tabBar(this.tabBuilder(3, '附近'));
      }
      .onChange((index: number) => {
        this.currentIndex = index;
      });
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .backgroundColor('#f3f3f5')
    .width('100%')
    .height('100%');
  }

  @Builder
  tabBuilder(targetIndex: number, title: string) {
    Column() {
      Text(title).fontWeight(600).fontColor(this.currentIndex === targetIndex ? '#0A59F7' : '#6B6B6B');
    }.width('100%')
    .height(80)
    .justifyContent(FlexAlign.Center);
  }

  @Builder
  listControllerBuilder() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('90%')
            .height('15%')
            .textAlign(TextAlign.Center)
            .backgroundColor('#ffffff')
            .borderRadius(8);
        }
        .width('100%');
      }, (item: string) => item);
    }
    .edgeEffect(EdgeEffect.None)
    .onWillScroll((scrollOffset: number) => {
      this.scrollSum += scrollOffset;
      this.opacityNum = 1 - this.scrollSum / 300;
      if (this.opacityNum >= 1) {
        this.opacityNum = 1;
      }
    });
  }
}
```

#### 效果预览

#### 背景知识

*   标题栏渐变是通过页面滚动条偏移量调整标题栏透明度实现渐变的。
*   页面滚动条偏移量可以通过滚动回调事件onWillScroll获取。
*   标题栏组件的透明度通过通用属性opacity实现，opacity为0表示完全透明，达到隐藏组件效果，但是在布局中占位。

#### 问题定位

排查流程为：

1.  检查组件布局：先定位是否是标题栏组件被其他元素覆盖或者位置偏移导致无法显示。检查组件的父容器、布局属性以及其它相关元素，确保组件能够正常显示。
2.  检查组件样式：确保标题栏组件中的样式属性设置不会影响内部组件的可见性。
3.  检查代码逻辑：检查代码中是否会有属性变化导致标题栏不可见。

#### 分析结论

经过排查发现组件布局正常，未覆盖标题栏组件。但是标题栏组件中的opacity属性会影响到内部组件可见性，页面滚动条的偏移量会影响标题栏组件的透明度，透明度opacity设置为0时导致组件不可见。

#### 修改建议

如果需要修改标题栏透明度且不影响标题栏内容的展示，可以用rgba格式设置背景色，通过调整背景色的透明度来实现标题栏渐变，而不影响标题栏内容的展示。

```
@Entry
@Component
struct tabTopScroll {
  private tabController: TabsController = new TabsController();
  @State arr: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8', '9',];
  @State opacityNum: number = 1;
  @State scrollSum: number = 0;
  @State currentIndex: number = 0;

  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
        Image($r('app.media.startIcon')) // 资源文件需自行替换
          .width(30)
          .height(30)
          .borderRadius(8);
        Image($r('app.media.startIcon')) // 资源文件需自行替换
          .width(30)
          .height(30);
      }
      .padding({
        top: 8,
        bottom: 8,
        right: 16,
        left: 16
      })
      .backgroundColor(`rgba(70,130,180,${this.opacityNum})`) //使用rgba格式设置背景色，通过调整背景色的透明度来实现标题栏渐变。
      .position({ x: 0, y: 0 })
      .zIndex(99);

      // tab内容
      Tabs({ barPosition: BarPosition.End, controller: this.tabController }) {
        TabContent() {
          this.listControllerBuilder();
        }.tabBar(this.tabBuilder(0, '手机'));

        TabContent() {
          Column() {
            Text('发现的内容');
          }.width('100%').height('100%').backgroundColor('#007DFF').justifyContent(FlexAlign.Center);
        }.tabBar(this.tabBuilder(1, '宽带'));

        TabContent() {
          Column() {
            Text('推荐的内容');
          }.width('100%').height('100%').backgroundColor('#FFBF00').justifyContent(FlexAlign.Center);
        }.tabBar(this.tabBuilder(2, '家庭'));

        TabContent() {
          Column() {
            Text('我的内容');
          }.width('100%').height('100%').backgroundColor('#E67C92').justifyContent(FlexAlign.Center);
        }.tabBar(this.tabBuilder(3, '附近'));
      }.onChange((index: number) => {
        this.currentIndex = index;
      });
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .backgroundColor('#f3f3f5')
    .width('100%')
    .height('100%');
  }

  @Builder
  tabBuilder(targetIndex: number, title: string) {
    Column() {
      Text(title).fontWeight(600).fontColor(this.currentIndex === targetIndex ? '#0A59F7' : '#6B6B6B');
    }
    .width('100%')
    .height(80)
    .justifyContent(FlexAlign.Center);
  }

  @Builder
  listControllerBuilder() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('90%')
            .height('15%')
            .textAlign(TextAlign.Center)
            .backgroundColor('#ffffff')
            .borderRadius(8);
        }
        .width('100%');
      }, (item: string) => item);
    }
    .edgeEffect(EdgeEffect.None)
    .onWillScroll((scrollOffset: number) => {
      this.scrollSum += scrollOffset;
      this.opacityNum = 1 - this.scrollSum / 300;
      if (this.opacityNum >= 1) {
        this.opacityNum = 1;
      }
    });
  }
}
```

#### 总结

类似的UI内容不显示的问题可以从以下几个方面排查：

1.  布局和位置：查看是否被其它组件布局影响，位置发生变化导致不可见。
2.  可见性：是否有设置类似visibility属性或者组件在if-else的判断中导致不可见。
3.  样式和外观：是否是颜色透明度或者大小尺寸变化导致不可见。