Android Jetpack Compose —— FloatingActionButton

        FloatingActionButton 通常用于呈现应用程序的主要操作或常用操作，并具有显著的圆形形状和浮动的定位。FloatingActionButton 提供了一种简单而优雅的方式来引导用户进行主要的应用程序交互，例如开始一个新的任务、分享内容、启动一个动作等。它在应用程序界面中的悬浮位置使得用户可以方便地访问它，而不会占据太多屏幕空间。

---

一、FloatingActionButton的使用

1. 添加依赖项：在项目的 build.gradle 文件中，确保已添加 Jetpack Compose 的依赖项。例如：

implementation "androidx.compose.material:material:1.2.0"

   2. 创建 FloatingActionButton：使用 FloatingActionButton 组件来创建悬浮操作按钮。可以在 Composable 函数中使用 FloatingActionButton 组件，

例如：

import androidx.compose.material.*
import androidx.compose.runtime.Composable

@Composable
fun MyScreenContent() {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { /* 处理点击事件 */ }) {
                // 在这里添加按钮图标或内容
            }
        }
    ) { innerPadding ->
        // 添加其他内容或界面元素
    }
}

    3. 定义点击事件：为 FloatingActionButton 添加 onClick 参数，并在点击时执行所需的操作。可以在 onClick 参数中定义一个 Lambda 表达式，或者调用一个命名函数。 

FloatingActionButton(onClick = { /* 处理点击事件 */ }) {
    // 在这里添加按钮图标或内容
}

   4. 自定义外观和样式：可以通过修改 FloatingActionButton 的属性来自定义其外观和样式。例如，可以设置按钮的背景颜色、形状、图标、大小等。

FloatingActionButton(
    onClick = { /* 处理点击事件 */ },
    backgroundColor = MaterialTheme.colors.primary,
    shape = CircleShape,
    content = {
        Icon(Icons.Filled.Add, contentDescription = "Add")
    },
    modifier = Modifier.size(56.dp)
)

   5.在界面中使用 FloatingActionButton：将创建的 FloatingActionButton 添加到相应的界面中。可以使用 Scaffold 组件来创建一个包含 FloatingActionButton 的界面。

@Composable
fun MyScreenContent() {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { /* 处理点击事件 */ }) {
                // 在这里添加按钮图标或内容
            }
        }
    ) { innerPadding ->
        // 添加其他内容或界面元素
    }
}

案例1： 

 

 

        FloatingActionButton 在现代应用程序设计中非常重要，因为它提供了一种直观和可见的方式来呈现主要操作。它不仅使用户界面更加美观，而且增强了用户体验，使用户能够更轻松地与应用程序进行交互。无论是在移动应用程序还是在平板电脑或桌面应用程序中，FloatingActionButton 都是一种非常实用的设计元素，有助于提高应用程序的可用性和可访问性。