在jetpack compose中实现长按FAB？

Question

是否可以对晶圆厂实现长按，在晶圆厂顶部显示带有标签的小按钮，而无需额外组件？

如果不是，如何使用附加组件来实现它但具有相同的视觉结果？

我当前的FAB如下所示：https: //codeberg.org/pabloscloud/Overload/src/commit/eae4132fd66d58d9ee52fe51ed18eb5bc2cd9f53/app/src/main/java/cloud/pablos/overload/ui/tabs/home/HomeTabFab.kt

FloatingActionButton(
        onClick = {
            /* onClick - event */
        },
        modifier = Modifier
            .padding(10.dp),
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp),
        ) {
            Icon(
                imageVector = Icons.Default.PlayArrow
                contentDescription = stringResource(id = R.string.edit),
                modifier = Modifier.padding(8.dp, 0.dp, 0.dp, 0.dp),

            )
            TextView(
                text = stringResource(id = R.string.start),
                modifier = Modifier.padding(8.dp, 0.dp, 8.dp, 0.dp),
            )
        }
    }

我尝试使用其他组件而不是 FAB，但无法使其行为和外观相同。

Answer 1

你可以通过 3 种方式来构建它，因为我能想到可能还有其他方式。

您可以用来InteractionSource确定 fab 被按下的时间，collectLatest因为需要触发快速点击并取消先前的操作。

第二个选项是复制粘贴源代码并将其与Surface没有 onClick 参数的代码一起使用并添加Modifer.combinedClickable.

第三个选项是在 FloatingActionButton 或 Button 之前创建一个Modifier.pointerInput(){}用于PointerEventPass.Initial获取长按事件的事件。

我将发布第一个选项，因为这个选项比复制粘贴和修改解决方案更容易。

您也可以应用此解决方案，Button因为它也作为InteractionSource参数。

@Preview
@Composable
private fun Test() {
    
    val context = LocalContext.current

    val interactionSource = remember { MutableInteractionSource() }

    val viewConfiguration = LocalViewConfiguration.current


    LaunchedEffect(interactionSource) {
        var isLongClick = false

        interactionSource.interactions.collectLatest { interaction ->
            when (interaction) {
                is PressInteraction.Press -> {
                    isLongClick = false
                    delay(viewConfiguration.longPressTimeoutMillis)
                    isLongClick = true
                    Toast.makeText(context, "Long click", Toast.LENGTH_SHORT).show()
                }
                is PressInteraction.Release -> {
                    if (isLongClick.not()){
                        Toast.makeText(context, "click", Toast.LENGTH_SHORT).show()
                    }

                }
                is PressInteraction.Cancel -> {
                    isLongClick = false
                }
            }
        }
    }

    
    FloatingActionButton(
        interactionSource = interactionSource,
        onClick = {},
        modifier = Modifier
            .padding(10.dp),
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp),
        ) {
            Icon(
                imageVector = Icons.Default.PlayArrow,
                        contentDescription = null,
                modifier = Modifier.padding(8.dp, 0.dp, 0.dp, 0.dp),

                )
            Text(
                text = "Start",
                modifier = Modifier.padding(8.dp, 0.dp, 8.dp, 0.dp),
            )
        }
    }
}