HarmonyOS 鸿蒙Next 纯透明（非白色）

HarmonyOS 鸿蒙Next 纯透明（非白色）

@Entry @Component struct ScrollCeiling1 { scroller: Scroller = new Scroller() itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] tabTitles: Array<string> = [‘Tab1’, ‘Tab2’, ‘Tab3’]

@Builder tabContentData(tabTitle: string) { TabContent() { List() { ForEach(this.itemData, (item: number) => { ListItem() { Text(${item}) .height(80) .width(‘100%’) .textAlign(TextAlign.Center) .backgroundColor(0xDDDDDD) .margin({ bottom: 5 }) } }) } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) }.tabBar(tabTitle) .padding({ top: 5, bottom: 5 }) .borderWidth(1) .borderColor(Color.Red) }

build() { Column(){ Row () { Text(‘透明行内的文本’) .fontSize(16) .width(‘100%’) .height(20)

  }
  .justifyContent(FlexAlign.Center)
  .alignItems(VerticalAlign.Center)
  .backgroundColor(Color.Transparent)
  .width('100%') 
  .height(50) 
  Scroll(this.scroller) {
    Column () {
      Image($r('app.media.app_icon')).height(70)

      Tabs () {
        ForEach(this.tabTitles, (title: string) => {
          this.tabContentData(title)
        })
      }
      .borderWidth(2)
    }
    .width('90%')
    .alignItems(HorizontalAlign.Center)
  }
  .width('100%')
  .align(Alignment.Center)
  .scrollBar(BarState.Off)
}
.width('100%')
.height('100%')

} }

我想实现吸顶，但是我的顶部是这个Row()，然后计划用Stack布局将Row()放在最上面一层，下面会有一个图片，但这时，这个Row()不会遮挡图片，List上滑时也可以看到图片上滑，但是怎么样设置成纯透明呢?


更多关于HarmonyOS 鸿蒙Next 纯透明（非白色）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复 
是要这个效果吗

```typescript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ScrollCeiling1 {
  scroller: Scroller = new Scroller()
  itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  tabTitles: Array<string> = ['Tab1', 'Tab2', 'Tab3']

  [@Builder](/user/Builder)
  tabContentData(tabTitle: string) {
    TabContent() {
      List() {
        ForEach(this.itemData, (item: number) => {
          ListItem() {
            Text(`${item}`)
              .height(80)
              .width('100%')
              .textAlign(TextAlign.Center)
              .backgroundColor(0xDDDDDD)
              .margin({ bottom: 5 })
          }
        })
      }
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }.tabBar(tabTitle)
    .padding({ top: 5, bottom: 5 })
    .borderWidth(1)
    .borderColor(Color.Red)
  }

  /*
  设置scrollForward的滚动模式为NestedScrollMode.PARENT_FIRST：
  当控制List内元素向前滚动时，其父组件TabContent先滚动，覆盖Scroll组件嵌套的Column组件内的Image组件，随后Tabs组件触碰顶部边缘，触发边缘效果，从而固定在顶部
  设置scrollBackward的滚动模式为NestedScrollMode.SELF_FIRST：
  当控制List内元素向后滚动时，List的内容先滚动，直至滚动到List最顶部后，父组件TabContent开始滚动
  */

  build() {
    Stack(){
      Row() {
        Text('透明行内的文本')
          .fontSize(16)
          .width('100%')
          .height(20)

      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .backgroundColor(Color.Transparent)
      .width('100%') // 设置宽度为100%
      .height(50) // 设置高度为50
      .opacity(0.1) //透明度
      .zIndex(1)
      Scroll(this.scroller) {
        Column() {
          Column()
            .width('100%')
            .height(50)
          Image($r('app.media.app_icon')).height(70)
          Tabs() {
            ForEach(this.tabTitles, (title: string) => {
              this.tabContentData(title)
            })
          }
          .borderWidth(2)
        }
        .width('90%')
        .alignItems(HorizontalAlign.Center)
      }
      .align(Alignment.Center)
      .scrollBar(BarState.Off)
      .overlay()
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Top)
  }
}

更多关于HarmonyOS 鸿蒙Next 纯透明（非白色）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 的纯透明（非白色）特性主要涉及用户界面设计和系统视觉表现。鸿蒙Next 在设计上采用了纯透明的视觉效果，以提升用户体验和界面美观度。这种设计风格通过减少不必要的视觉元素，使界面更加简洁和现代。

在实现上，鸿蒙Next 使用了先进的图形渲染技术和高效的资源管理机制，确保透明效果在不影响系统性能的前提下实现。系统通过优化图层叠加、透明度调整和背景模糊等技术，使得界面元素能够在不同背景下保持一致的透明效果。

此外，鸿蒙Next 的纯透明设计还考虑了不同设备和屏幕尺寸的适配性，确保在各种硬件环境下都能提供一致的用户体验。系统提供了丰富的API和工具，供开发者轻松实现透明效果，并支持动态调整透明度以适应不同的应用场景。

总的来说，鸿蒙Next 的纯透明特性是其设计理念的一部分，旨在通过简化视觉元素和提升界面美观度，为用户带来更加流畅和现代的操作体验。

回到顶部