Skip to content

Commit b83ba45

Browse files
YuKongAYuKongA
committed
library: Opt TextField contentAlignment
1 parent 34a87a9 commit b83ba45

File tree

2 files changed

+99
-93
lines changed

2 files changed

+99
-93
lines changed

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ fun InputField(
171171
) {
172172
Box(
173173
modifier = Modifier.padding(start = 8.dp, end = 16.dp),
174+
contentAlignment = Alignment.CenterStart
174175
) {
175176
Icon(
176177
modifier = Modifier.clip(CircleShape).clickable { onQueryChange("") },
@@ -213,7 +214,8 @@ fun InputField(
213214
.background(
214215
color = MiuixTheme.colorScheme.surfaceContainerHigh,
215216
shape = shape.value
216-
)
217+
),
218+
contentAlignment = Alignment.CenterStart
217219
) {
218220
Row(
219221
modifier = Modifier.fillMaxWidth(),

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt‎

Lines changed: 96 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ fun TextField(
9595
@Suppress("NAME_SHADOWING")
9696
val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
9797
val paddingModifier = remember(insideMargin, leadingIcon, trailingIcon) {
98-
if (leadingIcon == null && trailingIcon == null) Modifier.padding(insideMargin.width, vertical = insideMargin.height)
98+
if (leadingIcon == null && trailingIcon == null) Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
9999
else if (leadingIcon == null) Modifier.padding(start = insideMargin.width).padding(vertical = insideMargin.height)
100100
else if (trailingIcon == null) Modifier.padding(end = insideMargin.width).padding(vertical = insideMargin.height)
101101
else Modifier.padding(vertical = insideMargin.height)
@@ -105,7 +105,7 @@ fun TextField(
105105
val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor)
106106
val labelOffsetY by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) -(insideMargin.height / 2) else 0.dp)
107107
val innerTextOffsetY by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) (insideMargin.height / 2) else 0.dp)
108-
val labelFontSize by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 16.dp)
108+
val labelFontSize by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 17.dp)
109109
val border = Modifier.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius))
110110
val labelOffset = if (label != "" && !useLabelAsPlaceholder) Modifier.offset(y = labelOffsetY) else Modifier
111111
val innerTextOffset = if (label != "" && !useLabelAsPlaceholder) Modifier.offset(y = innerTextOffsetY) else Modifier
@@ -126,60 +126,62 @@ fun TextField(
126126
onTextLayout = onTextLayout,
127127
interactionSource = interactionSource,
128128
cursorBrush = SolidColor(MiuixTheme.colorScheme.primary),
129-
decorationBox = { innerTextField ->
130-
val shape = remember { derivedStateOf { SmoothRoundedCornerShape(cornerRadius) } }
131-
Box(
132-
modifier = Modifier
133-
.fillMaxWidth()
134-
.background(
135-
color = backgroundColor,
136-
shape = shape.value
137-
)
138-
.then(border)
139-
) {
140-
Row(
141-
modifier = Modifier.fillMaxWidth(),
142-
verticalAlignment = Alignment.CenterVertically
129+
decorationBox =
130+
@Composable { innerTextField ->
131+
val shape = remember { derivedStateOf { SmoothRoundedCornerShape(cornerRadius) } }
132+
Box(
133+
modifier = Modifier
134+
.background(
135+
color = backgroundColor,
136+
shape = shape.value
137+
)
138+
.then(border),
139+
contentAlignment = Alignment.CenterStart
143140
) {
144-
if (leadingIcon != null) {
145-
leadingIcon()
146-
}
147-
Box(
148-
modifier = Modifier
149-
.weight(1f)
150-
.then(paddingModifier)
141+
Row(
142+
modifier = Modifier.fillMaxWidth(),
143+
verticalAlignment = Alignment.CenterVertically
151144
) {
152-
androidx.compose.animation.AnimatedVisibility(
153-
visible = if (useLabelAsPlaceholder) value.text.isEmpty() else true,
154-
enter = fadeIn(
155-
spring(stiffness = 2500f)
156-
),
157-
exit = fadeOut(
158-
spring(stiffness = 5000f)
159-
)
160-
) {
161-
Text(
162-
text = label,
163-
textAlign = TextAlign.Start,
164-
fontWeight = FontWeight.Medium,
165-
fontSize = labelFontSize.value.sp,
166-
modifier = Modifier.then(labelOffset),
167-
color = labelColor
168-
)
145+
if (leadingIcon != null) {
146+
leadingIcon()
169147
}
170148
Box(
171-
modifier = Modifier.then(innerTextOffset),
172-
contentAlignment = Alignment.BottomStart
149+
modifier = Modifier
150+
.weight(1f)
151+
.then(paddingModifier),
152+
contentAlignment = Alignment.CenterStart
173153
) {
174-
innerTextField()
154+
androidx.compose.animation.AnimatedVisibility(
155+
visible = if (useLabelAsPlaceholder) value.text.isEmpty() else true,
156+
enter = fadeIn(
157+
spring(stiffness = 2500f)
158+
),
159+
exit = fadeOut(
160+
spring(stiffness = 5000f)
161+
)
162+
) {
163+
Text(
164+
text = label,
165+
textAlign = TextAlign.Start,
166+
fontWeight = FontWeight.Medium,
167+
fontSize = labelFontSize.value.sp,
168+
modifier = Modifier.then(labelOffset),
169+
color = labelColor
170+
)
171+
}
172+
Box(
173+
modifier = Modifier.then(innerTextOffset),
174+
contentAlignment = Alignment.CenterStart
175+
) {
176+
innerTextField()
177+
}
178+
}
179+
if (trailingIcon != null) {
180+
trailingIcon()
175181
}
176-
}
177-
if (trailingIcon != null) {
178-
trailingIcon()
179182
}
180183
}
181184
}
182-
}
183185
)
184186
}
185187

@@ -248,7 +250,7 @@ fun TextField(
248250
val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor)
249251
val labelOffsetY by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) -(insideMargin.height / 2) else 0.dp)
250252
val innerTextOffsetY by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) (insideMargin.height / 2) else 0.dp)
251-
val labelFontSize by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 16.dp)
253+
val labelFontSize by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 17.dp)
252254
val border = Modifier.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius))
253255
val labelOffset = if (label != "" && !useLabelAsPlaceholder) Modifier.offset(y = labelOffsetY) else Modifier
254256
val innerTextOffset = if (label != "" && !useLabelAsPlaceholder) Modifier.offset(y = innerTextOffsetY) else Modifier
@@ -269,58 +271,60 @@ fun TextField(
269271
onTextLayout = onTextLayout,
270272
interactionSource = interactionSource,
271273
cursorBrush = SolidColor(MiuixTheme.colorScheme.primary),
272-
decorationBox = { innerTextField ->
273-
Box(
274-
modifier = Modifier
275-
.fillMaxWidth()
276-
.background(
277-
color = backgroundColor,
278-
shape = SmoothRoundedCornerShape(cornerRadius)
279-
)
280-
.then(border)
281-
) {
282-
Row(
283-
modifier = Modifier.fillMaxWidth(),
284-
verticalAlignment = Alignment.CenterVertically
274+
decorationBox =
275+
@Composable { innerTextField ->
276+
Box(
277+
modifier = Modifier
278+
.background(
279+
color = backgroundColor,
280+
shape = SmoothRoundedCornerShape(cornerRadius)
281+
)
282+
.then(border),
283+
contentAlignment = Alignment.CenterStart
285284
) {
286-
if (leadingIcon != null) {
287-
leadingIcon()
288-
}
289-
Box(
290-
modifier = Modifier
291-
.weight(1f)
292-
.then(paddingModifier)
285+
Row(
286+
modifier = Modifier.fillMaxWidth(),
287+
verticalAlignment = Alignment.CenterVertically
293288
) {
294-
androidx.compose.animation.AnimatedVisibility(
295-
visible = if (useLabelAsPlaceholder) value.isEmpty() else true,
296-
enter = fadeIn(
297-
spring(stiffness = 2500f)
298-
),
299-
exit = fadeOut(
300-
spring(stiffness = 5000f)
301-
)
302-
) {
303-
Text(
304-
text = label,
305-
textAlign = TextAlign.Start,
306-
fontWeight = FontWeight.Medium,
307-
fontSize = labelFontSize.value.sp,
308-
modifier = Modifier.then(labelOffset),
309-
color = labelColor
310-
)
289+
if (leadingIcon != null) {
290+
leadingIcon()
311291
}
312292
Box(
313-
modifier = Modifier.then(innerTextOffset),
314-
contentAlignment = Alignment.BottomStart
293+
modifier = Modifier
294+
.weight(1f)
295+
.then(paddingModifier),
296+
contentAlignment = Alignment.CenterStart
315297
) {
316-
innerTextField()
298+
androidx.compose.animation.AnimatedVisibility(
299+
visible = if (useLabelAsPlaceholder) value.isEmpty() else true,
300+
enter = fadeIn(
301+
spring(stiffness = 2500f)
302+
),
303+
exit = fadeOut(
304+
spring(stiffness = 5000f)
305+
)
306+
) {
307+
Text(
308+
text = label,
309+
textAlign = TextAlign.Start,
310+
fontWeight = FontWeight.Medium,
311+
fontSize = labelFontSize.value.sp,
312+
modifier = Modifier.then(labelOffset),
313+
color = labelColor
314+
)
315+
}
316+
Box(
317+
modifier = Modifier.then(innerTextOffset),
318+
contentAlignment = Alignment.CenterStart
319+
) {
320+
innerTextField()
321+
}
322+
}
323+
if (trailingIcon != null) {
324+
trailingIcon()
317325
}
318-
}
319-
if (trailingIcon != null) {
320-
trailingIcon()
321326
}
322327
}
323328
}
324-
}
325329
)
326330
}

0 commit comments

Comments
 (0)