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 从开始到结束都有额外的内部填充。因此，打字时文本会被剪切。

我尝试了许多解决方案，例如： Resizeable BasicTextField in Jetpack Compose

我也尝试设置 WindowInsets，但没有任何效果。

Answer 1

我会建议使用视图的 EditText在这里，因为它在定制方面提供了很大的灵活性。 我已将代码粘贴到 Paste Bin https://pastebin.com/Z1hS7xns

@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 = buildAmountEditText(
            context = LocalContext.current,
            amount = amount,
            onAmountChange = onAmountChange,
            placeholder = "0",
            focusChangeListener = { _, hasFocus ->
                // do something with focus
            },
            paddingValues = PaddingValues(0)
        )
        AndroidView(factory = { titleField })
    }
}