HarmonyOS 鸿蒙Next中悬浮按钮和可交互提示

HarmonyOS 鸿蒙Next中悬浮按钮和可交互提示

悬浮按钮和可交互提示

悬浮按钮：FloatingActionButton

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="50dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/ic_done"
    app:elevation="10dp"//可设置高度，高度越高投影越淡
    />

点击事件：

binding.fab.setOnClickListener{
    Toast.makeText(this,"You Click Fab",Toast.LENGTH_SHORT).show()
}

Snackbar

Material还提供了一个类似于Toast，可以提示，也可以加入一个可交互按钮的Snackbar

binding.fab.setOnClickListener{
    view->Snackbar.make(view,"Delete Data",Snackbar.LENGTH_SHORT).setAction("Undo"){
        Toast.makeText(this,"Data restored",Toast.LENGTH_SHORT).show()
}.show()
}
//view会自动寻找最外层布局；
//setAction设置按钮及点击事件

CoordinatorLayout

由AndroidX提供，可以理解成加强版的FrameLayout，可以监听其所有子控件的各种事件，并做出最为合理的响应，如：FloatingActionButton上移避免被Snackbar遮挡，前提是Snackbar是由CoordinatorLayout的子控件的事件指定弹出


更多关于HarmonyOS 鸿蒙Next中悬浮按钮和可交互提示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

赞

更多关于HarmonyOS 鸿蒙Next中悬浮按钮和可交互提示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next中，悬浮按钮通过FloatingButton组件实现，支持自定义位置、样式和点击事件。可交互提示使用Toast或Dialog组件，其中Toast提供短暂信息提示，Dialog支持用户交互操作。两者均可通过ArkTS声明式UI进行开发，无需依赖Java或C语言。

在HarmonyOS Next中，悬浮按钮和可交互提示的实现方式与Android Material Design有显著区别，因为HarmonyOS Next使用ArkUI作为其声明式UI开发框架。你提供的代码是基于Android的XML和Kotlin，下面我将为你介绍在HarmonyOS Next中的等效实现。

1. 悬浮按钮：FloatingActionButton

在HarmonyOS Next中，没有直接名为FloatingActionButton的组件，但可以使用Button组件结合样式和布局来实现悬浮按钮的效果。

实现示例（ArkTS）：

@Entry
@Component
struct FloatingActionButtonExample {
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      // 主界面内容
      Text('Main Content')
        .width('100%')
        .height('100%')

      // 悬浮按钮
      Button() {
        Image($r('app.media.ic_done')) // 图标资源
          .width(24)
          .height(24)
      }
      .type(ButtonType.Circle)
      .size({ width: 56, height: 56 })
      .backgroundColor('#007DFF')
      .shadow({ radius: 10, color: '#33000000', offsetX: 0, offsetY: 5 }) // 设置阴影
      .margin({ bottom: 50, right: 16 })
      .onClick(() => {
        // 点击事件处理
        promptAction.showToast({ message: 'You Click Fab' })
      })
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

  • 使用Stack布局实现悬浮效果，通过Alignment.BottomEnd将按钮定位在右下角。
  • Button组件设置type为ButtonType.Circle实现圆形按钮。
  • shadow属性用于设置阴影效果，模拟elevation。
  • onClick事件处理中，使用promptAction.showToast显示提示。

2. 可交互提示：Snackbar

在HarmonyOS Next中，没有直接的Snackbar组件，但可以使用CustomDialogController或@CustomDialog装饰器创建自定义对话框来实现类似的可交互提示。

实现示例（ArkTS）：

@Entry
@Component
struct SnackbarExample {
  // 自定义对话框控制器
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 }
  })

  build() {
    Column() {
      Button('Show Snackbar')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}

// 自定义对话框组件
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController

  build() {
    Column() {
      Text('Delete Data')
        .fontSize(16)
        .margin({ top: 12, bottom: 12 })

      Row() {
        Button('Undo')
          .backgroundColor(Color.Transparent)
          .fontColor('#007DFF')
          .onClick(() => {
            this.controller.close()
            promptAction.showToast({ message: 'Data restored' })
          })

        Blank()

        Button('Dismiss')
          .backgroundColor(Color.Transparent)
          .fontColor('#007DFF')
          .onClick(() => {
            this.controller.close()
          })
      }
      .width('100%')
      .padding(10)
    }
    .width('90%')
    .backgroundColor('#F5F5F5')
    .borderRadius(8)
  }
}

关键点说明：

  • 使用CustomDialogController创建底部对齐的自定义对话框。
  • 对话框内容可以包含文本和可交互的按钮（如"Undo"）。
  • 通过controller.close()关闭对话框，并触发相应的操作。

3. 布局协调：CoordinatorLayout

在HarmonyOS Next中，Stack布局天然支持子组件的层叠和相对定位，可以自动处理类似CoordinatorLayout的遮挡问题。例如，当自定义对话框（Snackbar）从底部弹出时，Stack布局中的悬浮按钮会自动保持在对话框上方，无需额外处理。

总结： HarmonyOS Next通过ArkUI的声明式语法和强大的布局组件（如Stack、CustomDialog）提供了与Android Material Design类似的功能，但实现方式更加简洁和统一。开发者需要适应这种新的范式，利用HarmonyOS Next的组件和API构建原生体验。

回到顶部