Jetpack Compose中TextField的额外内边距

Question

我有一个TextField用于输入金额，如下所示：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun AmountTextField(
    modifier: Modifier,
    sendMoneyViewModel: SendMoneyViewModel,
    isReadOnly: Boolean,
    focusManager: FocusManager
) {
    val paymentAmount = sendMoneyViewModel.paymentAmount.collectAsState()
    val focusRequester = remember { FocusRequester() }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
    val interactionSource = remember { MutableInteractionSource() }
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Spacer(modifier = Modifier.weight(1f))
        Text(
            modifier = Modifier.wrapContentWidth(),
            text = stringResource(id = R.string.rupee_symbol),
            color = Black191919,
            fontSize = 36.sp,
            fontFamily = composeFontFamily,
            fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD)
        )
        BasicTextField(
            modifier = Modifier
                .focusRequester(focusRequester)
                .background(color = YellowFFFFEAEA)
                .height(IntrinsicSize.Min)
                .width(IntrinsicSize.Min)
                .clipToBounds(),
            value = paymentAmount.value,
            onValueChange = {
                sendMoneyViewModel.onAmountValueChanged(it)
            },
            interactionSource = interactionSource,
            visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
            singleLine = true,
            textStyle = TextStyle(
                color = Black191919,
                fontSize = 36.sp,
                fontFamily = composeFontFamily,
                fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
                textAlign = TextAlign.Center
            ),
            keyboardActions = KeyboardActions(onDone = {
                if (paymentAmount.value.isNotBlank()) {
                    focusManager.moveFocus(FocusDirection.Next)
                }
            }),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number, autoCorrect = false, imeAction = ImeAction.Next
            ),
            readOnly = isReadOnly
        ) {
            TextFieldDefaults.TextFieldDecorationBox(
                value = paymentAmount.value,
                visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
                innerTextField = it,
                singleLine = true,
                enabled = !isReadOnly,
                interactionSource = interactionSource,
                contentPadding = PaddingValues(0.dp),
                placeholder = { AmountFieldPlaceholder() },
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    cursorColor = Color.Black,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent
                )
            )
        }
        Spacer(modifier = Modifier.weight(1f))
    }
}

@Composable
fun AmountFieldPlaceholder() {
    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
        Text(
            modifier = Modifier
                .wrapContentWidth()
                .align(Alignment.Center),
            text = "0",
            fontSize = 36.sp,
            fontFamily = composeFontFamily,
            fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
            color = GreyE3E5E5,
            textAlign = TextAlign.Center
        )

    }
}

最初它看起来像这样： 输入“12”后，它看起来像这样：，你可以看到文本“1”被切掉了。

理想情况下，在输入1234567后应该是这个样子：。但除了实际文本大小外，还有额外的内部填充从开头和结尾开始。因此，它可能会出现意外滚动，如下所示： 为什么TextField在开头和结尾处有额外的内部填充。因此，在键入时文本会被切断。

我尝试了许多解决方案，例如： 在Jetpack Compose中调整大小的BasicTextField，我还尝试设置WindowInsets，但什么都没起作用。

- Mohit Rajput

---

我遇到了同样的问题，因为singleLine参数的缘故：它使文本字段可滚动，这与受限宽度不兼容。 - Phil Dukhov

@PhilDukhov在移除singleLine后，它是否正常工作？ - Mohit Rajput

是的，它对我很有效 - 但我必须过滤掉换行符，以便源代码成为单行。 - Phil Dukhov

Answer 1

我建议在这里使用View的EditText，因为它提供了许多自定义的灵活性。我已经将代码粘贴到Paste Bin中：https://pastebin.com/Z1hS7xns 更新：将buildAmountEditText()包装在remember{}中，否则每次有新的消息字符串时都会创建它。

@Composable
fun AmountTextField(
    amount: String,
    onAmountChange: (String) -> Unit
) {
    Row(
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = stringResource(R.string.rupee_symbol),
            style = MaterialTheme.typography.h2.copy(
                color = Color(0xFF191919),
                fontWeight = FontWeight.ExtraBold
            )
        )
        val titleField = remember {
            buildAmountEditText(
                context = LocalContext.current,
                amount = amount,
                onAmountChange = onAmountChange,
                placeholder = "0",
                focusChangeListener = { _, hasFocus ->
                    // do something with focus
                },
                paddingValues = PaddingValues(0)
            )
         }
        AndroidView(factory = { titleField })
    }
}

- Jayesh Suthar

Answer 2

移除 singleLine 属性或将其设置为 false。这是最简单的解决方案。

- Mohit Rajput