HarmonyOS鸿蒙Next中模仿鸿蒙5.x官方自带备忘录app的自定义toggle组件

HarmonyOS鸿蒙Next中模仿鸿蒙5.x官方自带备忘录app的自定义toggle组件

@State currentMode: string = 'project'; // project和todo

toggleMode(mode: 'project' | 'todo') {
  this.getUIContext().animateTo({ curve: Curve.Linear, duration: 180 }, () => {
    this.currentMode = mode
  })
}

build() {
  RelativeContainer() {
    Button(this.currentMode === 'project' ? '项目' : '待办')
      .fontColor(Color.Transparent)
      .backgroundColor('#ffffff')
      .fontSize(14)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        left: this.currentMode === 'project' ? { anchor: "__container__", align: HorizontalAlign.Start } : null,
        right: this.currentMode === 'todo' ? { anchor: "__container__", align: HorizontalAlign.End } : null
      })

    Button('项目')
      .backgroundColor(Color.Transparent)
      .stateEffect(false)
      .fontColor(this.currentMode === 'project' ? Color.Orange : '#666')
      .fontSize(14)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        left: { anchor: "__container__", align: HorizontalAlign.Start },
      })
      .onClick(() => {
        this.toggleMode('project')
      })

    Button('待办')
      .backgroundColor(Color.Transparent)
      .stateEffect(false)
      .fontColor(this.currentMode === 'todo' ? Color.Orange : '#666')
      .fontSize(14)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        right: { anchor: "__container__", align: HorizontalAlign.End },
      })
      .onClick(() => {
        this.toggleMode('todo')
      })
  }
  .backgroundColor('#e1e1e1')
  .borderRadius(20)
  .width(120)
  .height(40)
  .padding(3)
}

更多关于HarmonyOS鸿蒙Next中模仿鸿蒙5.x官方自带备忘录app的自定义toggle组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，可通过自定义组件实现类似官方备忘录的toggle样式。使用ArkTS声明式UI，结合@State装饰器管理开关状态。通过条件渲染修改背景色与滑块位置，利用Column、Row等布局容器与点击事件绑定状态切换。可自定义尺寸、颜色与动画效果，保持与鸿蒙设计语言一致。

更多关于HarmonyOS鸿蒙Next中模仿鸿蒙5.x官方自带备忘录app的自定义toggle组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现类似鸿蒙5.x官方备忘录的自定义toggle组件，代码结构基本合理，但可以进一步优化动画效果和样式细节。

当前代码使用RelativeContainer和Button组合实现切换效果，通过animateTo实现平滑过渡。建议调整以下部分：

  1. 将滑动按钮的背景色改为不透明，确保视觉一致性
  2. 使用ZIndex控制图层层级，避免文本重叠
  3. 考虑使用SpringMotion或ResponsiveSpringMotion替代线性动画，使切换更自然

示例改进：

Button(this.currentMode === 'project' ? '项目' : '待办')
  .backgroundColor('#ffffff')
  .fontColor(Color.Black) // 改为可见文本
  .zIndex(1) // 确保在最上层

整体实现思路正确，稍作调整即可达到与官方备忘录相似的切换效果。

回到顶部