鸿蒙应用示例:仿钉钉日历新建日程

【开发环境】

开发工具:DevEco Studio NEXT Beta1 Build Version: 5.0.3.814

工程API版本:12

【组件初始化】

Page02结构体定义了几个状态变量:offsetX, offsetY, positionX, positionY,这些变量用于跟踪用户操作引起的UI位置变化。containerHeight和originalHeight则用来控制UI容器的高度,同时containerHeightChanged方法确保容器的高度不会低于设定的最小值。

【用户界面构建】

build()方法是创建UI的核心逻辑。它首先创建了一个Column布局,用于垂直排列子元素。内部的RelativeContainer则允许更精细的位置控制,通过绝对或相对位置来放置子元素。

【动态UI元素】

在RelativeContainer中,我们添加了一个带有文字的矩形和两个圆点。这两个圆点不仅作为视觉元素,还绑定了拖动手势(PanGesture),这使得用户可以通过拖动操作改变容器的高度,从而模拟日程项的增加或减少过程。

【手势处理】

我们使用了两种不同的拖动手势:一种用于调整容器的高度,另一种则用于整体移动容器的位置。这些手势操作更新了相应的状态变量,并最终反映在UI布局上。

【完整代码】

javascript 复制代码
@Entry
@Component
struct Page02 {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State @Watch('containerHeightChanged') containerHeight: number = 50;
  @State originalHeight: number = 50;

  containerHeightChanged() {
    if (this.containerHeight < 50) {
      this.containerHeight = 50
    }
  }

  build() {
    Column() {
      RelativeContainer() {
        Rect()
          .fill("#2fd164")
          .borderColor("#39bd66")
          .borderWidth(1)
          .borderRadius(5)
          .clip(true)
          .width("100%")
          .height("100%")

        Text("再次点击新建日程")
          .fontColor(Color.White)
          .margin({ top: 30, left: 130 })
          .fontSize(15)
          .alignRules({
            center: { anchor: "__container__", align: VerticalAlign.Top },
            middle: { anchor: "__container__", align: HorizontalAlign.Start }
          })

        Stack() {
          Circle({ height: 5, width: 5 })
            .fill(Color.White)
            .stroke(Color.White)
            .strokeWidth(2)
        }
        .hitTestBehavior(HitTestMode.Block)
        .padding(20)
        .margin({ left: 60 })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .gesture(PanGesture({
          fingers: 1,
          direction: PanDirection.Vertical,
          distance: 1
        }).onActionUpdate((event: GestureEvent) => {
          if (event) {
            this.offsetY = this.positionY + event.offsetY;
            this.containerHeight = this.originalHeight - event.offsetY;
          }
        }).onActionEnd(() => {
          this.positionX = this.offsetX;
          this.positionY = this.offsetY;
          this.originalHeight = this.containerHeight;
        })
        )

        Stack() {
          Circle({ height: 5, width: 5 })
            .fill(Color.White)
            .stroke(Color.White)
            .strokeWidth(2)
        }
        .hitTestBehavior(HitTestMode.Block)
        .padding(20)
        .margin({ right: 60 })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .gesture(PanGesture({
          fingers: 1,
          direction: PanDirection.Vertical,
          distance: 2
        }).onActionUpdate((event: GestureEvent) => {
          this.containerHeight = this.originalHeight + event.offsetY;
        }).onActionEnd(() => {
          this.originalHeight = this.containerHeight;
        })
        )
      }
      .height(this.containerHeight)
      .width("80%")
      .translate({ x: this.offsetX, y: this.offsetY })
      .gesture(PanGesture({
        fingers: 1,
        direction: PanDirection.Vertical,
        distance: 1
      }).onActionUpdate((event: GestureEvent) => {
        if (event) {
          this.offsetX = this.positionX + event.offsetX;
          this.offsetY = this.positionY + event.offsetY;
        }
      }).onActionEnd(() => {
        this.positionX = this.offsetX;
        this.positionY = this.offsetY;
      })
      )
    }
    .height('100%')
    .width('100%')
  }
}
相关推荐
AORO_BEIDOU3 小时前
单北斗+鸿蒙系统+国产芯片,遨游防爆手机自主可控“三保险”
华为·智能手机·harmonyos
博览鸿蒙5 小时前
鸿蒙操作系统(HarmonyOS)的应用开发入门
华为·harmonyos
Damon小智12 小时前
HarmonyOS NEXT 技术实践-基于基础视觉服务的多目标识别
华为·harmonyos
爱笑的眼睛111 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
K.P1 天前
鸿蒙元服务从0到上架【第三篇】(第二招有捷径)
华为·harmonyos·鸿蒙系统
K.P1 天前
鸿蒙元服务从0到上架【第二篇】
华为·harmonyos·鸿蒙系统
敲代码的小强1 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
程序猿会指北1 天前
纯血鸿蒙APP实战开发——Text实现部分文本高亮和超链接样式
移动开发·harmonyos·arkts·openharmony·arkui·组件化·鸿蒙开发
鸿蒙自习室2 天前
鸿蒙开发——关系型数据库的基本使用与跨设备同步
前端·数据库·华为·harmonyos·鸿蒙
SoraLuna2 天前
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
开发语言·macos·ui·华为·harmonyos