Kolin状态提升以及输入框
@Composable fun TipTimeLayout() { var amountInput by remember { mutableStateOf("") } var tipInput by remember { mutableStateOf("") } // Switch 可组合项状态 var roundUp by remember { mutableStateOf(false) } // 转换为double输入为空时值为0.0 val amount = amountInput.toDoubleOrNull() ?: 0.0 val tipPercent = tipInput.toDoubleOrNull() ?: 0.0 val tip = calculateTip(amount, tipPercent, roundUp) Column( modifier = Modifier .statusBarsPadding() .padding(horizontal = 40.dp) // 允许上下滚动 .verticalScroll(rememberScrollState()) .safeDrawingPadding(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text( text = stringResource(R.string.calculate_tip), modifier = Modifier .padding(bottom = 16.dp, top = 40.dp) .align(alignment = Alignment.Start) ) EditNumberField( label = R.string.bill_amount, leadingIcon = R.drawable.money, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.Number, imeAction = ImeAction.Next ), value = amountInput, onValueChange = { amountInput = it }, modifier = Modifier .padding(bottom = 32.dp) .fillMaxWidth() ) EditNumberField( label = R.string.how_was_the_service, leadingIcon = R.drawable.percent, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.Number, imeAction = ImeAction.Done ), value = tipInput, onValueChange = { tipInput = it }, modifier = Modifier .padding(bottom = 32.dp) .fillMaxWidth(), ) RoundTheTipRow( roundUp = roundUp, onRoundUpChanged = { roundUp = it }, modifier = Modifier.padding(bottom = 32.dp) ) Text( text = stringResource(R.string.tip_amount, tip), style = MaterialTheme.typography.displaySmall ) Spacer(modifier = Modifier.height(150.dp)) } } @Composable fun RoundTheTipRow( roundUp: Boolean, onRoundUpChanged: (Boolean) -> Unit, modifier: Modifier = Modifier ) { Row( modifier = modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Text(text = stringResource(R.string.round_up_tip)) Switch( checked = roundUp, onCheckedChange = onRoundUpChanged, modifier = Modifier .fillMaxWidth() .wrapContentWidth(Alignment.End) ) } } /** * 用到了状态提升，提高了可复用性 * @param label 标签 * @param leadingIcon 前置图标 * @param keyboardOptions 键盘类型 */ @Composable fun EditNumberField( @StringRes label: Int, @DrawableRes leadingIcon: Int, keyboardOptions: KeyboardOptions, value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier ) { TextField( value = value, leadingIcon = { Icon(painter = painterResource(id = leadingIcon), null) }, onValueChange = onValueChange, singleLine = true, label = { Text(stringResource(label)) }, keyboardOptions = keyboardOptions, modifier = modifier ) } private fun calculateTip( amount: Double, tipPercent: Double = 15.0, roundUp: Boolean ): String { var tip = tipPercent / 100 * amount if (roundUp) { tip = kotlin.math.ceil(tip) } return NumberFormat.getCurrencyInstance().format(tip) }