library: Add new SmoothRoundedCornerShape

YuKongA · YuKongA · commit 0ed362583de9 · 2024-10-16T23:01:44.000+08:00
* from https://github.com/OpenAHU/AHUTong/blob/master/app/src/main/java/com/ahu/ahutong/ui/shape/SmoothRoundedCornerShape.kt
diff --git a/composeApp/src/commonMain/kotlin/component/TextComponent.kt b/composeApp/src/commonMain/kotlin/component/TextComponent.kt
@@ -6,16 +6,13 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.runtime.Composable
@@ -26,7 +23,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.BasicComponent
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
@@ -20,6 +19,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A button component with Miuix style.
@@ -51,7 +51,7 @@ fun Button(
         },
         enabled = enabled,
         modifier = modifier.semantics { role = Role.Button },
-        shape = RoundedCornerShape(cornerRadius),
+        shape = SmoothRoundedCornerShape(cornerRadius),
         color = color
     ) {
         Row(
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt
@@ -3,7 +3,6 @@ package top.yukonga.miuix.kmp.basic
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -12,6 +11,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A card component with Miuix style.
@@ -33,7 +33,7 @@ fun Card(
     color: Color = MiuixTheme.colorScheme.surface,
     content: @Composable ColumnScope.() -> Unit
 ) {
-    val shape = remember { RoundedCornerShape(cornerRadius) }
+    val shape = remember { SmoothRoundedCornerShape(cornerRadius) }
     val paddingModifier = remember(insideMargin) {
         Modifier.padding(vertical = insideMargin.height, horizontal = insideMargin.width)
     }
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt
@@ -33,6 +33,7 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A checkbox component with Miuix style.
@@ -87,7 +88,7 @@ fun Checkbox(
         modifier = modifier
             .wrapContentSize(Alignment.Center)
             .size(22.dp)
-            .clip(RoundedCornerShape(100f))
+            .clip(RoundedCornerShape(100.dp))
             .requiredSize(checkboxSize)
             .pointerInput(Unit) {
                 detectTapGestures(
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt
@@ -1,22 +1,20 @@
 package top.yukonga.miuix.kmp.basic
 
-import androidx.compose.foundation.Indication
-import androidx.compose.foundation.LocalIndication
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A floating action button component with Miuix style.
@@ -32,7 +30,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 fun FloatingActionButton(
     modifier: Modifier = Modifier,
     onClick: () -> Unit,
-    shape: Shape = RoundedCornerShape(50.dp),
+    shape: Shape = RoundedCornerShape(60.dp),
     containerColor: Color = MiuixTheme.colorScheme.primary,
     shadowElevation: Float = 18f,
     content: @Composable () -> Unit,
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -33,6 +32,7 @@ import androidx.compose.ui.zIndex
 import kotlinx.coroutines.delay
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.BackHandler
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A search bar with Miuix style.
@@ -164,7 +164,7 @@ fun InputField(
                 modifier = Modifier
                     .background(
                         color = MiuixTheme.colorScheme.surfaceContainerHigh,
-                        shape = RoundedCornerShape(50.dp)
+                        shape = SmoothRoundedCornerShape(50.dp)
                     )
             ) {
                 Row(
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Slider.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Slider.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectHorizontalDragGestures
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -25,6 +24,7 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 import kotlin.math.pow
 import kotlin.math.round
 
@@ -104,6 +104,7 @@ fun Slider(
     ) {
         SliderBackground(
             modifier = Modifier.fillMaxWidth().height(height),
+            height = height,
             backgroundColor = backgroundColor.value,
             foregroundColor = foregroundColor.value,
             effect = effect,
@@ -117,14 +118,15 @@ fun Slider(
 @Composable
 fun SliderBackground(
     modifier: Modifier,
+    height: Dp = 30.dp,
     backgroundColor: Color,
     foregroundColor: Color,
     effect: Boolean,
     progress: Float,
     minValue: Float,
     maxValue: Float,
 ) {
-    Canvas(modifier = modifier.clip(RoundedCornerShape(100.dp)).background(backgroundColor)) {
+    Canvas(modifier = modifier.clip(SmoothRoundedCornerShape(height)).background(backgroundColor)) {
         val barHeight = size.height
         val barWidth = size.width
         val progressWidth = barWidth * ((progress - minValue) / (maxValue - minValue))
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt
@@ -29,6 +29,7 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 import kotlin.math.absoluteValue
 
 /**
@@ -105,7 +106,7 @@ fun Switch(
             .wrapContentSize(Alignment.Center)
             .size(52.dp, 28.5.dp)
             .requiredSize(52.dp, 28.5.dp)
-            .clip(RoundedCornerShape(100.dp))
+            .clip(SmoothRoundedCornerShape(52.dp))
             .background(if (enabled) backgroundColor else disabledBackgroundColor)
             .pointerInput(Unit) {
                 detectHorizontalDragGestures(
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -32,6 +31,7 @@ import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A text field component with Miuix style.
@@ -98,7 +98,7 @@ fun TextField(
     val labelOffsetY by animateDpAsState(if (value.text.isNotEmpty()) -(insideMargin.height / 2) else 0.dp)
     val innerTextOffsetY by animateDpAsState(if (value.text.isNotEmpty()) (insideMargin.height / 2) else 0.dp)
     val labelFontSize by animateDpAsState(if (value.text.isNotEmpty()) 10.dp else 16.dp)
-    val border = Modifier.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius))
+    val border = Modifier.border(borderWidth, borderColor, SmoothRoundedCornerShape(cornerRadius))
     val labelOffset = if (label != "") Modifier.offset(y = labelOffsetY) else Modifier
     val innerTextOffset = if (label != "") Modifier.offset(y = innerTextOffsetY) else Modifier
 
@@ -124,7 +124,7 @@ fun TextField(
                     .fillMaxWidth()
                     .background(
                         color = backgroundColor,
-                        shape = RoundedCornerShape(cornerRadius)
+                        shape = SmoothRoundedCornerShape(cornerRadius)
                     )
                     .then(border)
             ) {
@@ -228,7 +228,7 @@ fun TextField(
     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)
-    val border = Modifier.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius))
+    val border = Modifier.border(borderWidth, borderColor, SmoothRoundedCornerShape(cornerRadius))
     val labelOffset = if (label != "") Modifier.offset(y = labelOffsetY) else Modifier
     val innerTextOffset = if (label != "") Modifier.offset(y = innerTextOffsetY) else Modifier
 
@@ -254,7 +254,7 @@ fun TextField(
                     .fillMaxWidth()
                     .background(
                         color = backgroundColor,
-                        shape = RoundedCornerShape(cornerRadius)
+                        shape = SmoothRoundedCornerShape(cornerRadius)
                     )
                     .then(border)
             ) {
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
@@ -36,6 +35,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.BackHandler
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.isDialogShowing
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.showDialog
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 import top.yukonga.miuix.kmp.utils.getRoundedCorner
 import top.yukonga.miuix.kmp.utils.getWindowSize
 
@@ -119,12 +119,12 @@ fun SuperDialog(
                             }
                             .align(contentAlignment.invoke().value)
                             .graphicsLayer(
-                                shape = RoundedCornerShape(bottomCornerRadius),
+                                shape = SmoothRoundedCornerShape(bottomCornerRadius),
                                 clip = false
                             )
                             .background(
                                 color = backgroundColor,
-                                shape = RoundedCornerShape(bottomCornerRadius)
+                                shape = SmoothRoundedCornerShape(bottomCornerRadius)
                             )
                             .padding(insideMargin),
                     ) {
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
@@ -66,6 +65,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.BackHandler
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.showPopup
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 import top.yukonga.miuix.kmp.utils.getWindowSize
 import kotlin.math.roundToInt
 
@@ -239,9 +239,9 @@ fun SuperDropdown(
                             .align(AbsoluteAlignment.TopLeft)
                             .graphicsLayer(
                                 shadowElevation = 18f,
-                                shape = RoundedCornerShape(18.dp)
+                                shape = SmoothRoundedCornerShape(18.dp)
                             )
-                            .clip(RoundedCornerShape(18.dp))
+                            .clip(SmoothRoundedCornerShape(18.dp))
                             .background(MiuixTheme.colorScheme.surface)
                     ) {
                         item {
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/SmoothRoundedCornerShape.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/SmoothRoundedCornerShape.kt
