如何在Jetpack Compose中检测Spinner下拉菜单的打开时机

根据你提供的Spinner代码，这里给你几种可行的解决方案，适配不同场景：

1. 若Spinner是自定义组件：直接添加打开回调 #

如果这个Spinner是你自己封装的Compose组件，最直接的方式是给组件新增一个onDropdownOpen回调参数，在触发下拉菜单打开的逻辑处调用它：

修改Spinner组件定义 #

@Composable
fun Spinner(
    modifier: Modifier = Modifier,
    dropDownModifier: Modifier = Modifier,
    enabled: Boolean,
    items: List<YourItemType>,
    selectedItem: YourItemType,
    onItemSelected: (YourItemType) -> Unit,
    selectedItemFactory: @Composable (YourItemType) -> Unit,
    dropdownItemFactory: @Composable (YourItemType) -> Unit,
    onDropdownOpen: () -> Unit = {} // 新增打开回调
) {
    // 假设原有触发下拉的逻辑绑定在可点击组件上
    Box(
        modifier = modifier.clickable(enabled = enabled) {
            onDropdownOpen() // 打开下拉前触发回调
            // 原有打开下拉菜单的逻辑（比如更新expanded状态）
        }
    ) {
        selectedItemFactory(selectedItem)
        // 下拉菜单的实现逻辑...
    }
}

使用时传入回调逻辑 #

Spinner(
    modifier = modifier
        .fillMaxWidth()
        .heightIn(min = 40.dp)
        .border(1.dp, alto)
        .background(if (enabled) white else gray.copy(alpha = 0.7f))
        .onGloballyPositioned { layoutCoordinates ->
            rowSize = layoutCoordinates.size.toSize()
        },
    dropDownModifier = dropdownModifier
        .width(with(LocalDensity.current) { rowSize.width.toDp() })
        .wrapContentHeight(),
    enabled = enabled,
    items = displayItems,
    selectedItem = selected,
    onItemSelected = onSelectionChange,
    selectedItemFactory = selectedItemFactory,
    dropdownItemFactory = dropdownItemFactory,
    onDropdownOpen = {
        // 这里执行你需要的逻辑，比如埋点、状态更新等
        println("下拉菜单已触发打开")
    }
)

2. 若使用第三方Spinner库：监听点击或状态变化 #

如果这个Spinner是第三方开源库的实现，先检查组件是否自带下拉打开的回调参数。如果没有，可以通过以下两种方式处理：

方式A：用pointerInput监听点击事件 #

给Spinner的modifier添加pointerInput来监听点击，在点击时执行逻辑：

Spinner(
    modifier = modifier
        .fillMaxWidth()
        .heightIn(min = 40.dp)
        .border(1.dp, alto)
        .background(if (enabled) white else gray.copy(alpha = 0.7f))
        .onGloballyPositioned { layoutCoordinates ->
            rowSize = layoutCoordinates.size.toSize()
        }
        .pointerInput(enabled) {
            detectTapGestures(
                onTap = {
                    if (enabled) {
                        // 检测到Spinner被点击，执行逻辑
                        println("Spinner被点击，即将打开下拉菜单")
                    }
                }
            )
        },
    // 其他原有参数...
)

注意：如果出现点击事件冲突（比如同时触发你的逻辑和Spinner本身的下拉逻辑），可以尝试在pointerInput中使用awaitFirstDown()并控制事件传递，或者查看库的源码是否暴露了下拉菜单的expanded状态。

方式B：通过状态变化判断打开时机 #

如果库允许你控制下拉菜单的展开状态（比如暴露了expanded参数），可以通过监听状态变化来触发逻辑：

var isDropdownExpanded by remember { mutableStateOf(false) }

LaunchedEffect(isDropdownExpanded) {
    if (isDropdownExpanded) {
        // 下拉菜单打开时执行逻辑
        println("下拉菜单已打开")
    }
}

Spinner(
    // 原有参数...
    expanded = isDropdownExpanded, // 假设库有这个参数
    onExpandedChange = { isDropdownExpanded = it }
)

3. 若用官方DropdownMenu实现Spinner：监听expanded状态 #

如果你的Spinner是基于官方DropdownMenu封装的，直接通过控制expanded状态来检测打开时机：

var expanded by remember { mutableStateOf(false) }

Box {
    // 触发下拉的可点击区域
    Box(
        modifier = modifier
            .fillMaxWidth()
            .heightIn(min = 40.dp)
            .border(1.dp, alto)
            .background(if (enabled) white else gray.copy(alpha = 0.7f))
            .clickable(enabled = enabled) {
                expanded = true
                // 打开时直接执行逻辑
                println("下拉菜单即将打开")
            }
    ) {
        selectedItemFactory(selected)
    }

    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = dropdownModifier
            .width(with(LocalDensity.current) { rowSize.width.toDp() })
            .wrapContentHeight()
    ) {
        displayItems.forEach { item ->
            DropdownMenuItem(
                onClick = {
                    onSelectionChange(item)
                    expanded = false
                }
            ) {
                dropdownItemFactory(item)
            }
        }
    }
}

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