将可点击位置组合到行的上边缘的文本？

Question

我将以下内容与其他文本排成一行。其他文本通常定位 - 居中垂直，但这个被推到上边缘。怎么了？

更新：更完整的代码：

不确定如何处理此投诉：

“看起来您的 post 主要是代码；请添加更多详细信息。”

Row {
    SelectionContainer(
        modifier = Modifier
            .padding(10.dp)
            .weight(1f)
    ) {
        Text(
            text = "a word",
            textAlign = TextAlign.Center,
            fontSize = dimensionResource(dimen.subtitle_size).value.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .clickable {
                    playAudio()
                }
        )
    }
    DividerHorizontal()
    Text(
        text = "test",
        modifier = Modifier
            .padding(end = 5.dp)
            .combinedClickable(
                onClick = {
                    onClick()
                },
                onLongClick = {
                    onLongClick()
                }
            ),
        textAlign = TextAlign.Center,
        fontSize = dimensionResource(dimen.normal_text).value.sp,
    )
    DividerHorizontal()
    TagSpinner(::addTag)
}



@Composable
fun DividerHorizontal() {
    Divider(
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )
}

不允许包含更多代码？

@Composable
inline fun TagSpinner(crossinline addTag : (String) -> Unit) {
    Box(
        modifier = Modifier
            .padding(horizontal = 10.dp)
    ) {
        var expanded by remember { mutableStateOf(false) }
        val tags: MutableList<String> = ArrayList(20)
        tags.add("All")
        if (tagTokens.isNotEmpty())
            tags.addAll(listOf(*tags()))
        Button(onClick = { expanded = !expanded }) {
            Text("Tag")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            tags.forEachIndexed { index, label ->
                DropdownMenuItem(onClick = {
                    expanded = false
                    addTag(tags[index])
                }) {
                    Text(text = label)
                }
            }
        }
    }
}

Answer 1

您布局中的任何内容实际上都没有垂直居中。文本 "a word" 可能会如此显示，因为它包含名为 SelectionContainer 的可组合项，并设置了 .padding(10.dp)。属性将提到的文本推离顶部边缘，因此看起来居中。当然，如果可组合项的高度恰到好处。如果使用预览，很明显不是垂直居中。这是我使用的预览：

为了让可组合项垂直居中，我建议这样做：

Row(
    modifier = Modifier
        .wrapContentHeight(),
    verticalAlignment = Alignment.CenterVertically,
) {
    SelectionContainer(
        modifier = Modifier
//            .padding(10.dp) - this is not needed anymore
            .weight(1f)
    ) {
        ...
    }
    ...
}

您还需要将 DividerHorizontal 更改为：

@Composable
fun DividerHorizontal() {
    Divider(
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .width(1.dp)
    )
}

我相信结果更接近您想要达到的目标：

将可点击位置组合到行的上边缘的文本？

Text with combinedClickable placed to upper edge of the row?

android-jetpack-compose

android-jetpack-compose-text