HarmonyOS鸿蒙Next组件

HarmonyOS鸿蒙Next组件

具体代码：

@Entry
@Component
struct DDUserCenterPage {
  //tab的索引
  @State currentIndex: number = 0
  //tab控制器
  controller: TabsController = new TabsController()
  scrollScroller: Scroller = new Scroller()
  @State scrollOffset: number = 0

  build() {
    Column() {
      //标题
      Row() {
        Text('我是标题')
      }
      .height(60)
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(this.scrollOffset > 100 ? '#007edb' : 'rgba(0,0,0,0.1)')
      .backgroundColor(this.scrollOffset > 100 ? '#007edb' : Color.Transparent)
      .animation({ duration: 300 })
      .zIndex(0)

      //滚动区域
      Scroll(this.scrollScroller) {
        //scroll内唯一根组件
        Column() {
          // scroll Area
          Text('scroll Area').width('100%').height(200).textAlign(TextAlign.Center).backgroundColor('#007edb')
          //tab
          Column() {
            // 自定义tabbar
            Row({ space: 30 }) {
              ForEach(Array.from({ length: 2 }), (item: number, index: number) => {
                Text(`页签${index}`).height(50).fontColor(this.currentIndex == index ? '#f00' : '#000').onClick(() => {
                  this.currentIndex = index
                  this.controller.changeIndex(this.currentIndex)
                })
                Text('|')
              })
            }.backgroundColor('#fff').width('100%').justifyContent(FlexAlign.Center).position({ x: 0, y: 0 })

            //tabbar绝对定位0，0 .zIndex(1)
            // 真正的tab
            Tabs({ controller: this.controller }) {
              TabContent() {
                Scroll() {
                  Column() {
                    Text('可能被tabbar遮住的内容').height(60).backgroundColor('#666')
                    Text('内容1')
                      .width('100%')
                      .fontSize(30)
                      .height(1500)
                      .textAlign(TextAlign.Center)
                      .backgroundColor('#999')
                  }
                }.nestedScroll({
                  //设置向上推时父子组件一起滚动
                  scrollForward: NestedScrollMode.PARALLEL,
                  //设置向下拉时父组件优先滚动
                  scrollBackward: NestedScrollMode.PARENT_FIRST
                })
              }

              TabContent() {
                Scroll() {
                  Text('内容2')
                    .width('100%')
                    .fontSize(30)
                    .height(1500)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#999')
                }
              }
            }.margin({ top: 50 })
            //将被tabbar定位遮住的部分露出来
            .barHeight(0)
            // 设置tabs自带tabbar的高为0
            .onChange(index => {
              this.currentIndex = index
            })
          }
        }
      }.width('100%').layoutWeight(1).onScroll(() => {
        this.scrollOffset = this.scrollScroller.currentOffset().yOffset
      })
    }.width('100%').height('100%').backgroundColor('#f6f6f6')
  }
}
  1. Text(‘我是标题’) 这个组件怎么覆盖到 Text(‘scroll Area’) 这个组件的上面，两者是重叠关系。
  2. 基于问题1的重叠效果，上划操作的时候‘页签0’和‘页签1’ 怎么悬停在 Text(‘我是标题’) 的下面

更多关于HarmonyOS鸿蒙Next组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

enum ScrollPosition { start, center, end } @Entry @Component struct NestedScroll { @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。 @State showTitle: boolean = false; @State currentYOffset: number = 0; private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; private scrollerForScroll: Scroller = new Scroller(); private scrollerForList: Scroller = new Scroller(); controller: TextInputController = new TextInputController() build() { Stack({ alignContent: Alignment.Top }) { Scroll(this.scrollerForScroll) { Column() { Column() { }.width(“100%”).height(“40%”).backgroundColor(Color.Pink) Tabs({ barPosition: BarPosition.Start }) { TabContent() { List({ space: 10, scroller: this.scrollerForList }) { ForEach(this.arr, (item: number) => { ListItem() { Text(“促销商品” + item) .width(“100%”) .height(“100%”) .borderRadius(15) .fontSize(24) .textAlign(TextAlign.Center) .backgroundColor(Color.White) } .width(“100%”).height(100) }, (item: string) => item) } .padding({ left: 10, right: 10 }) .width(“100%”) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) .onReachStart(() => { this.listPosition = ScrollPosition.start }) .onReachEnd(() => { this.listPosition = ScrollPosition.end }) .onScrollFrameBegin((offset: number, state: ScrollState) => { // 滑动到列表中间时 if (!((this.listPosition == ScrollPosition.start && offset < 0) || (this.listPosition == ScrollPosition.end && offset > 0))) { this.listPosition = ScrollPosition.center } // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量 if (this.scrollPosition == ScrollPosition.end && (this.listPosition != ScrollPosition.start || offset > 0)) { return { offsetRemain: offset }; } else { this.scrollerForScroll.scrollBy(0, offset) return { offsetRemain: 0 }; } }) }.tabBar(‘促销活动’) TabContent() { List({ space: 10, scroller: this.scrollerForList }) { ForEach(this.arr, (item: number) => { ListItem() { Text(“行程安排” + item) .width(“100%”) .height(“100%”) .borderRadius(15) .fontSize(24) .textAlign(TextAlign.Center) .backgroundColor(Color.White) } .width(“100%”).height(100) }, (item: string) => item) } .padding({ left: 10, right: 10 }) .width(“100%”) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) .onReachStart(() => { this.listPosition = ScrollPosition.start }) .onReachEnd(() => { this.listPosition = ScrollPosition.end }) .onScrollFrameBegin((offset: number, state: ScrollState) => { // 滑动到列表中间时 if (!((this.listPosition == ScrollPosition.start && offset < 0) || (this.listPosition == ScrollPosition.end && offset > 0))) { this.listPosition = ScrollPosition.center } // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量 if (this.scrollPosition == ScrollPosition.end && (this.listPosition != ScrollPosition.start || offset > 0)) { return { offsetRemain: offset }; } else { this.scrollerForScroll.scrollBy(0, offset) return { offsetRemain: 0 }; } }) } .tabBar(‘行程服务’) } .vertical(false) .barMode(BarMode.Fixed) .barWidth(360) .barHeight(56) .width(“100%”) .height(“92%”) .backgroundColor(’#F1F3F5’) } } .scrollBar(BarState.Off) .width(“100%”) .height(“100%”) .onScroll((xOffset: number, yOffset: number) => { this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset; // 非（页面在顶部或页面在底部），则页面在中间 if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0) || (this.scrollPosition == ScrollPosition.end && yOffset > 0))) { this.scrollPosition = ScrollPosition.center } }) .onScrollEdge((side: Edge) => { if (side == Edge.Top) { // 页面在顶部 this.scrollPosition = ScrollPosition.start } else if (side == Edge.Bottom) { // 页面在底部 this.scrollPosition = ScrollPosition.end } }) .onScrollFrameBegin(offset => { if (this.scrollPosition == ScrollPosition.end) { return { offsetRemain: 0 }; } else { return { offsetRemain: offset }; } }) Row() { Text(‘活动标题’) .width(‘100%’) .fontSize(24) .backgroundColor(Color.Orange) .height(60) } .justifyContent(FlexAlign.Center) .backgroundColor(’#00ffffff’) .width(‘100%’) .height(‘8%’) } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) } }

更多关于HarmonyOS鸿蒙Next组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next组件是华为为开发者提供的一套高效、灵活的UI开发工具，旨在简化应用界面的构建过程。该组件库基于ArkUI框架，支持声明式编程范式，允许开发者通过简洁的代码快速实现复杂的界面效果。Next组件包括基础组件（如按钮、文本、图片等）和高级组件（如列表、网格、卡片等），能够满足不同场景的需求。

在HarmonyOS鸿蒙Next组件中，开发者可以通过XML或TypeScript/JavaScript进行界面布局，并利用组件的事件绑定和数据绑定功能实现动态交互。组件库还提供了丰富的样式和主题支持，帮助开发者快速实现UI的一致性。此外，Next组件在设计上注重性能优化，确保应用在低功耗设备上也能流畅运行。

Next组件的一个重要特性是其跨设备适配能力，开发者可以通过一次开发，将应用界面适配到手机、平板、智能手表、智慧屏等多种设备上。这种能力得益于HarmonyOS的分布式架构和组件库的响应式设计。开发者只需关注业务逻辑，无需为不同设备的屏幕尺寸和交互方式做额外处理。

总之，HarmonyOS鸿蒙Next组件为开发者提供了一套高效、灵活且跨设备的UI开发工具，能够显著提升开发效率和应用性能。

HarmonyOS鸿蒙Next是华为推出的下一代操作系统，其组件设计旨在实现全场景智能体验。

  • 分布式能力：支持跨设备无缝协同，如手机、平板、智能家居等。
  • 微内核架构：提升系统安全性和性能，保障数据隐私。
  • 方舟编译器：优化应用性能，提升运行效率。
  • 多终端开发框架：一次开发，多端部署，降低开发成本。
  • AI能力集成：内置AI引擎，支持智能语音、图像识别等功能。

这些组件共同构建了一个高效、安全、智能的操作系统生态。

回到顶部