在不创建另一个 Kotlin 类文件的情况下，我想从计算器应用程序的其他按钮更新 BasicTextField

Question

因此，我模仿摩托罗拉手机上默认的 Android 计算器应用程序构建了计算器的整个 UI。我使用的是 Column{Box{BasicTextField} Column{Rowx5{Buttonx4}}} 的结构。我想使用同一可组合项内部按钮的值更新 BasicTextField。

这是直到 BasicTextField 末尾的代码

@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
@Composable
fun Calculator(text: String, modifier: Modifier = Modifier) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val focusRequester = remember {
        FocusRequester()
    }

    LaunchedEffect(
        key1 = Unit,
    ) {
        focusRequester.requestFocus()
        keyboardController?.hide()
    }

    var initialText = "Hello"
    var text by remember {
        mutableStateOf(
            value = TextFieldValue(
                text = "Hello",
                selection = TextRange(
                    start = initialText.length,
                    end = initialText.length,
                ),
            ),
        )
    }
    Column(
        modifier
            .fillMaxSize()
            .background(color = colorResource(id = R.color.near_black)),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier
                .background(
                    color = colorResource(id = R.color.deep_gray),
                    shape = RoundedCornerShape(0.dp, 0.dp, 18.dp, 18.dp)
                )
                .fillMaxWidth(1f)
                .fillMaxHeight(0.35f), contentAlignment = Alignment.Center
        ) {
            BasicTextField(
                value = text,
                onValueChange = { value: TextFieldValue ->
                    text = value
                },
                enabled = false,
                modifier = Modifier
                    .focusRequester(focusRequester)
                    .fillMaxWidth()
                    .fillMaxHeight(0.8f)
                    .padding(0.dp, 0.dp, 0.dp, 24.dp),
                textStyle = TextStyle(
                    textAlign = TextAlign.End,
                    fontSize = 20.sp,
                    color = colorResource(id = R.color.button_text),
                )
            ) {
                Text(text = text.toString())
                keyboardController?.hide()
            }
        }

这是容纳输入/操作按钮的列

        Column(
            horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier
                .fillMaxWidth(1f)
                .fillMaxHeight(0.99f)
                .background(
                    color = colorResource(
                        id = R.color.near_black
                    )
                )
                .padding(0.dp),
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Spacer(modifier = modifier.height(5.dp))
            /* Square Root - Exclamation */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = stringResource(id = R.string.square_root),
                    modifier = Modifier,
                    onClick = { },
                    myButtonColor = colorResource(id = R.color.transparent_button),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 60
                )
                CircularButton(
                    text = stringResource(id = R.string.pi),
                    modifier = Modifier,
                    onClick = { },
                    myButtonColor = colorResource(id = R.color.transparent_button),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 60
                )
                CircularButton(
                    text = stringResource(id = R.string.power_carat),
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.transparent_button),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 60
                )
                CircularButton(
                    text = stringResource(id = R.string.exclamation_mark),
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.transparent_button),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 60
                )
            }
            /* Clear - Divide */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = "AC",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.clear_button),
                    color = colorResource(id = R.color.clear_button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "( )",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "%",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 24,
                    buttonSize = 80
                )
                CircularButton(
                    text = "÷",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 26,
                    buttonSize = 80
                )
            }
            /* Seven - Multiply */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = "7",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "8",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "9",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "X",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 24,
                    buttonSize = 80
                )
            }
            /* Four - Subtract */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = "4",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "5",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "6",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "－",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 26,
                    buttonSize = 80
                )
            }
            /* One - Add */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = "1",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "2",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "3",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "+",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 26,
                    buttonSize = 80
                )
            }
            /* Zero - Equals */
            Row(
                modifier
                    .fillMaxWidth()
                    .padding(10.dp, 0.dp, 10.dp, 0.dp), Arrangement.SpaceBetween
            ) {
                CircularButton(
                    text = "0",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = ".",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = stringResource(id = R.string.erase),
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.number_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 22,
                    buttonSize = 80
                )
                CircularButton(
                    text = "=",
                    modifier = Modifier,
                    onClick = { /*TODO*/ },
                    myButtonColor = colorResource(id = R.color.operator_buttons),
                    color = colorResource(id = R.color.button_text),
                    myFontSize = 26,
                    buttonSize = 80
                )
            }
            Spacer(modifier = modifier.height(15.dp))
        }
    }


}

这是我为了节省时间而制作的可组合按钮。

@Composable
fun CircularButton(
    text: String,
    modifier: Modifier,
    onClick: () -> Unit,
    myButtonColor: Color,
    color: Color,
    myFontSize: Int,
    buttonSize: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .clip(CircleShape)
            .clickable { onClick() }
            .then(modifier)
            .size(buttonSize.dp)
            .background(color = myButtonColor)
    ) {
        Text(
            text = text,
            fontSize = myFontSize.sp,
            color = color,
            textAlign = TextAlign.Center
        )
    }
}

所以，是的，从 CircularButton 中，我希望能够将 onClick 设置为可以将按钮的值添加到 BasicTextField 字段/字符串值的方法/函数。

蒂亚

我希望点击一个按钮并将其值添加到 BasicTextField 所在的浅灰色区域。

Answer 1

添加您想要添加的文本作为

onClick

方法的参数：

@Composable
fun CircularButton(
    text: String,
    modifier: Modifier,
    onClick: (textToAdd: String) -> Unit,
    myButtonColor: Color,
    color: Color,
    myFontSize: Int,
    buttonSize: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .clip(CircleShape)
            .clickable { onClick(text) }
            .then(modifier)
            .size(buttonSize.dp)
            .background(color = myButtonColor)
    ) {
        Text(
            text = text,
            fontSize = myFontSize.sp,
            color = color,
            textAlign = TextAlign.Center
        )
    }
}

然后调用此方法时：

CircularButton(
    text = "7",
    modifier = Modifier,
    onClick = { textToAdd ->
        text += textToAdd  // add the new text to the BasicTextField's text
    },
    myButtonColor = colorResource(id = R.color.number_buttons),
    color = colorResource(id = R.color.button_text),
    myFontSize = 22,
    buttonSize = 80
)