如何在 Jetpack compose 中的文本后面显示 BasicTextField 尾随图标

Question

如何在 Jetpack 撰写中的文本后面显示 BasicTextField 尾随图标。 我的示例在行的 和 处显示图标，文本和 TrailingIcon 之间有很大的空间

BasicTextField(
                    value = selectedText,
                    onValueChange = { extendedView = false },
                    readOnly = true,
                    textStyle = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentHeight()
                        .menuAnchor()

                ) {
                        TextFieldDefaults.TextFieldDecorationBox(
                            value = selectedText,
                            innerTextField = it,
                            singleLine = true,
                            enabled = false,
                            visualTransformation = VisualTransformation.None,
                            trailingIcon = {
                                Image(
                                    painter = painterResource(id = LocalAppResources.current.arrowDown),
                                    contentDescription = "Arrow down",
                                    contentScale = ContentScale.None,
                                    alignment = Alignment.Center
                                )
                            },
                            placeholder = { account.name },
                            interactionSource = remember { MutableInteractionSource() },
                            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                                top = 2.dp, bottom = 2.dp, start = 6.dp, end = 0.dp
                            ),
                            colors = TextFieldDefaults.textFieldColors(
                                containerColor = Color.Transparent,
                                unfocusedIndicatorColor = Color.Transparent,
                                disabledIndicatorColor = Color.Transparent
                            ),
                        )
                    }
                }

Answer 1

你可以试试这个

预览

代码

@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Stack032() {

    val searchTextFieldValue =
        remember { mutableStateOf(TextFieldValue()) }

    BasicTextField(
        modifier = Modifier
            .wrapContentSize(),
        value = searchTextFieldValue.value,
        onValueChange = { newText ->
            searchTextFieldValue.value = newText
        },
        decorationBox = { innerTextField ->
            TextFieldDefaults.DecorationBox(
                value = searchTextFieldValue.value.text,
                innerTextField = {
                    innerTextField()
                },
                enabled = true,
                singleLine = true,
                visualTransformation = VisualTransformation.None,
                interactionSource = remember { MutableInteractionSource() },
                trailingIcon = {
                    Icon(imageVector = Icons.Filled.Close,
                        contentDescription = "search",
                        modifier = Modifier.clickable {
                            searchTextFieldValue.value = TextFieldValue("")
                        })
                },
                contentPadding = PaddingValues(0.dp),
            )
        },
    )
}