HarmonyOS 鸿蒙Next是否支持类似CoordinatorLayout+AppbarLayout功能

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next是否支持类似CoordinatorLayout+AppbarLayout功能 是否有类似安卓中CoordinatorLayout+AppbarLayout的组件

2 回复

CoordinatorLayout+AppbarLayout功能参考下面代码

enum ScrollPosition { start, center, end }

@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();

build() { Stack({ alignContent: Alignment.Top }) { Scroll(this.scrollerForScroll) { Column() { Image($r(‘app.media.background’)) .width(“100%”) .height(“40%”)

      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          List({ space: 10, scroller: this.scrollerForList }) {
            ForEach(this.arr, (item: Number, index?: number) => {
              ListItem() {
                Text("ListItem" + item)
                  .width("100%")
                  .height("100%")
                  .borderRadius(15)
                  .fontSize(24)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(Color.White)
              }.width("100%").height(100)
            }, (item: Number) => JSON.stringify(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() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.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 };
    }
  })

  if (this.currentYOffset >= 0) {
    Row() {
      Text('发现').fontSize(24)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('8%')
    .opacity(this.currentYOffset / 50 > 1 ? 1 : this.currentYOffset / 50)
  }
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)

} }

更多关于HarmonyOS 鸿蒙Next是否支持类似CoordinatorLayout+AppbarLayout功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next是否支持类似CoordinatorLayout+AppbarLayout功能,主要取决于其UI框架和组件库的设计。在Android开发中,CoordinatorLayout和AppbarLayout是Material Design UI库中的关键组件,用于实现复杂的布局和滚动行为,如响应滚动事件的工具栏和折叠式标题栏。

对于HarmonyOS,其UI框架可能采用了不同的设计理念和组件实现方式。如果HarmonyOS提供了类似的布局管理器或组件,那么它可能支持类似CoordinatorLayout+AppbarLayout的功能。然而,由于HarmonyOS与Android在架构和API设计上存在差异,因此直接移植Android的布局和组件可能并不现实。

为了确定HarmonyOS是否支持此类功能,建议查阅HarmonyOS的官方文档或开发者指南,了解其UI框架和组件库的具体实现。如果HarmonyOS的UI框架中确实存在类似的布局或组件,那么开发者可以参照官方文档进行使用。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部