HarmonyOS NEXT中如何自定义悬浮效果的button？

Question

HarmonyOS NEXT中如何自定义悬浮效果的button

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在HarmonyOS NEXT中自定义悬浮效果的按钮（Floating Action Button, FAB），你可以通过使用Button组件并结合样式、动画和布局属性来实现。为了创建一个具有悬浮效果的按钮，你需要考虑以下方面：

设置圆形背景：使用XML资源文件或代码直接为按钮设置一个圆形背景。
添加阴影效果：可以通过设置按钮的elevation属性来增加阴影效果，让按钮看起来像是浮在界面上。
调整位置：通常FAB位于屏幕的一角，可以使用DependentLayout等布局管理器，并配合layout_config属性将按钮放置在合适的位置。
定义交互动画：为按钮点击或其他交互动作添加动画效果，如缩放或颜色变化。
下面是一个简单的ArkTS代码示例，展示了如何创建一个带有悬浮效果的按钮：

import { Button, DependentLayout, LayoutConfig, Color, Elevation } from '@ohos/arkui';

// 创建悬浮按钮
const floatingActionButton = new Button({
    text: '+', // 按钮上的文本
    width: '56vp', // 宽度
    height: '56vp', // 高度
    backgroundColor: Color.fromArgb(255, 0, 122, 255), // 背景颜色
    elevation: Elevation.of(6), // 设置阴影高度以实现悬浮效果
    cornerRadius: '28vp', // 圆角半径，使按钮呈现圆形
    onClick: () => {
        console.log('Floating action button clicked!');
        // 在这里添加点击事件逻辑
    }
});

// 使用DependentLayout定位按钮到右下角
const layout = new DependentLayout({
    children: [floatingActionButton],
    config: LayoutConfig.MATCH_PARENT,
    gravity: 'bottom|end', // 将按钮定位到右下角
    margin: '16vp' // 给按钮添加边距
});

// 将布局添加到页面中
// 注意：这一步取决于你的具体页面结构

Answer 2

鸿蒙操作系统（HarmonyOS）支持创建悬浮球效果，这通常通过使用浮窗服务（Floating Window Service）来实现。浮窗服务允许应用程序在屏幕的顶层显示窗口，这些窗口可以是悬浮按钮、悬浮球等用户交互元素，并且可以在用户操作其他应用时保持可见。可通过窗口实现悬浮按钮的效果。
参考文档：设置悬浮窗
参考文章链接：基于子窗口实现应用内悬浮窗