如何在Jetpack Compose中实现长按FAB弹出带标签的小按钮？

无需额外组件的实现方式 #

完全可以用Jetpack Compose原生组件实现，核心是通过状态管理控制按钮显隐，结合手势监听和布局定位：

• 用Box包裹原FAB和要显示的带标签小按钮，通过状态变量控制小按钮的显示/隐藏
• 给FAB添加pointerInput监听长按和释放事件，切换显隐状态
• 调整小按钮的padding，让它固定在FAB上方

示例代码：

var showActionButton by remember { mutableStateOf(false) }

Box(
    modifier = Modifier.padding(10.dp),
    contentAlignment = Alignment.BottomCenter
) {
    // 长按显示的带标签小按钮
    if (showActionButton) {
        Row(
            modifier = Modifier
                .padding(bottom = 80.dp)
                .background(MaterialTheme.colorScheme.surface, RoundedCornerShape(8.dp))
                .padding(horizontal = 12.dp, vertical = 6.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = Icons.Default.Edit,
                contentDescription = stringResource(R.string.edit),
                modifier = Modifier.padding(end = 6.dp)
            )
            Text(text = stringResource(R.string.edit))
        }
    }

    // 原FAB组件
    FloatingActionButton(
        onClick = { /* 点击事件逻辑 */ },
        modifier = Modifier
            .pointerInput(Unit) {
                detectTapGestures(
                    onLongPress = { showActionButton = true },
                    onPress = {
                        tryAwaitRelease()
                        showActionButton = false
                    }
                )
            },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp),
        ) {
            Icon(
                imageVector = Icons.Default.PlayArrow,
                contentDescription = stringResource(R.string.edit),
                modifier = Modifier.padding(start = 8.dp)
            )
            Text(
                text = stringResource(R.string.start),
                modifier = Modifier.padding(start = 8.dp, end = 8.dp)
            )
        }
    }
}

这个方案里，长按FAB时显示上方的带标签按钮，松开后自动隐藏，完全基于原生组件，不需要额外依赖。

借助额外组件的实现方式 #

如果需要更丰富的动画（比如展开/收起的过渡动画）或者现成的交互逻辑，可以使用第三方库，比如compose-fab-menu这类专门的FAB扩展库。

引入库依赖后，实现代码示例：

ExpandableFab(
    icon = { Icon(Icons.Default.PlayArrow, contentDescription = null) },
    expandedIcon = { Icon(Icons.Default.Close, contentDescription = null) },
    containerColor = MaterialTheme.colorScheme.secondaryContainer,
    contentColor = MaterialTheme.colorScheme.onSecondaryContainer
) {
    FabItem(
        icon = { Icon(Icons.Default.Edit, contentDescription = stringResource(R.string.edit)) },
        label = { Text(stringResource(R.string.edit)) },
        onClick = { /* 子按钮点击逻辑 */ }
    )
}

使用第三方库可以快速实现带标签的展开式FAB，还能自定义动画效果，注意要选择和你的Compose版本兼容的库版本。

内容的提问来源于stack exchange，提问作者Pablo