From b1b2cfc8511164a9ea57d1982aafc1dde4951b97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=99=E7=A9=BA?= <70465933+YuKongA@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:22:52 +0800 Subject: [PATCH] library: Allow MiuixTextField to set label and background color --- .../kotlin/component/OtherComponent.kt | 77 ++++++++++++------- .../yukonga/miuix/kmp/basic/MiuixTextField.kt | 12 +-- 2 files changed, 58 insertions(+), 31 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/component/OtherComponent.kt b/composeApp/src/commonMain/kotlin/component/OtherComponent.kt index f1ea053..7f28bea 100644 --- a/composeApp/src/commonMain/kotlin/component/OtherComponent.kt +++ b/composeApp/src/commonMain/kotlin/component/OtherComponent.kt @@ -13,6 +13,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.ImeAction @@ -40,47 +41,71 @@ fun OtherComponent(padding: PaddingValues) { keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), ) + MiuixTextField( + value = text, + onValueChange = { text = it }, + backgroundColor = MiuixTheme.colorScheme.primaryContainer, + label = "Text Field", + modifier = Modifier.padding(horizontal = 28.dp), + keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), + ) + MiuixSlider( progress = progress, onProgressChange = { newProgress -> progress = newProgress }, - modifier = Modifier - .padding(horizontal = 28.dp) - .padding(bottom = 20.dp) + modifier = Modifier.padding(horizontal = 28.dp, vertical = 20.dp) ) MiuixSlider( progress = progressDisable, onProgressChange = {}, enabled = false, - modifier = Modifier - .padding(horizontal = 28.dp) - .padding(bottom = 20.dp) + modifier = Modifier.padding(horizontal = 28.dp) ) + MiuixCard( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 28.dp, vertical = 20.dp) + ) { + CardView() + } + MiuixCard( modifier = Modifier .fillMaxWidth() .padding(horizontal = 28.dp) - .padding(bottom = 20.dp + padding.calculateBottomPadding()) + .padding(bottom = 20.dp + padding.calculateBottomPadding()), + color = MiuixTheme.colorScheme.primary ) { - MiuixText( - text = "Card", - style = MiuixTheme.textStyles.paragraph, - fontWeight = FontWeight.SemiBold, - fontSize = 16.sp - ) - Spacer(Modifier.height(10.dp)) - MiuixText( - text = "123456789", - style = MiuixTheme.textStyles.paragraph - ) - MiuixText( - text = "一二三四五六七八九", - style = MiuixTheme.textStyles.paragraph - ) - MiuixText( - text = "!@#$%^&*()_+-=", - style = MiuixTheme.textStyles.paragraph - ) + CardView(color = Color.White) } +} + +@Composable +fun CardView(color: Color = MiuixTheme.colorScheme.onBackground) { + MiuixText( + color = color, + text = "Card", + style = MiuixTheme.textStyles.paragraph, + fontWeight = FontWeight.SemiBold, + fontSize = 16.sp + ) + Spacer(Modifier.height(10.dp)) + MiuixText( + color = color, + text = "123456789", + style = MiuixTheme.textStyles.paragraph + ) + MiuixText( + color = color, + text = "一二三四五六七八九", + style = MiuixTheme.textStyles.paragraph + ) + MiuixText( + color = color, + text = "!@#$%^&*()_+-=", + style = MiuixTheme.textStyles.paragraph + ) } \ No newline at end of file diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt index 208bbb9..f7d75c6 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt @@ -15,9 +15,9 @@ import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember -import androidx.compose.runtime.rememberUpdatedState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.text.TextLayoutResult import androidx.compose.ui.text.TextStyle @@ -38,11 +38,12 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape * @param onValueChange The callback to be called when the value changes. * @param modifier The modifier to be applied to the [MiuixTextField]. * @param insideMargin The margin inside the [MiuixTextField]. + * @param backgroundColor The background color of the [MiuixTextField]. * @param cornerRadius The corner radius of the [MiuixTextField]. * @param label The label to be displayed when the [MiuixTextField] is empty. + * @param labelColor The color of the label. * @param enabled Whether the [MiuixTextField] is enabled. * @param readOnly Whether the [MiuixTextField] is read-only. - * @param isSecondary Whether the [MiuixTextField] is secondary. * @param textStyle The text style to be applied to the [MiuixTextField]. * @param keyboardOptions The keyboard options to be applied to the [MiuixTextField]. * @param keyboardActions The keyboard actions to be applied to the [MiuixTextField]. @@ -60,8 +61,10 @@ fun MiuixTextField( onValueChange: (String) -> Unit, modifier: Modifier = Modifier, insideMargin: DpSize = DpSize(16.dp, 18.dp), + backgroundColor: Color = MiuixTheme.colorScheme.secondary, cornerRadius: Dp = 18.dp, label: String = "", + labelColor: Color = MiuixTheme.colorScheme.subTextField, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = MiuixTheme.textStyles.main, @@ -76,8 +79,7 @@ fun MiuixTextField( ) { val isFocused by interactionSource.collectIsFocusedAsState() val borderWidth by animateDpAsState(if (isFocused) 1.6.dp else 0.dp) - val backgroundColor by rememberUpdatedState(MiuixTheme.colorScheme.secondary) - val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary) + val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor) val labelOffsetY by animateDpAsState(if (value.isNotEmpty()) -(insideMargin.height / 2) else 0.dp) val innerTextOffsetY by animateDpAsState(if (value.isNotEmpty()) (insideMargin.height / 2) else 0.dp) val labelFontSize by animateDpAsState(if (value.isNotEmpty()) 10.dp else 16.dp) @@ -125,7 +127,7 @@ fun MiuixTextField( fontWeight = FontWeight.Medium, fontSize = labelFontSize.value.sp, modifier = Modifier.offset(y = labelOffsetY), - color = MiuixTheme.colorScheme.subTextField + color = labelColor ) MiuixBox( modifier = Modifier