Update to Compose Multiplatform 1.7.0-beta03 and Material3 1.3.0-beta04

Note: problem with clicks on desktop
open-ani · Jun 28, 2024 · 794e400 · 794e400
1 parent 9af9dbe
commit 794e400
Show file tree

Hide file tree

Showing 22 changed files with 246 additions and 135 deletions.
diff --git a/app/shared/build.gradle.kts b/app/shared/build.gradle.kts
@@ -175,23 +175,23 @@ kotlin {
 //        implementation(libs.javafx.graphics)
 
         // https://repo1.maven.org/maven2/org/openjfx/javafx-graphics/17.0.11/
-        val os = getOs()
-        val classifier = when (os) {
-            Os.MacOS -> {
-                // check aarch
-                if (System.getProperty("os.arch").contains("aarch")) {
-                    "mac-aarch64"
-                } else {
-                    "mac"
-                }
-            }
-
-            Os.Windows -> "win"
-            Os.Linux -> "linux"
-            else -> {
-                null
-            }
-        }
+//        val os = getOs()
+//        val classifier = when (os) {
+//            Os.MacOS -> {
+//                // check aarch
+//                if (System.getProperty("os.arch").contains("aarch")) {
+//                    "mac-aarch64"
+//                } else {
+//                    "mac"
+//                }
+//            }
+//
+//            Os.Windows -> "win"
+//            Os.Linux -> "linux"
+//            else -> {
+//                null
+//            }
+//        }
 
         runtimeOnly(libs.kotlinx.coroutines.debug)
 
@@ -329,6 +329,15 @@ tasks.withType(KotlinCompilationTask::class) {
     dependsOn("generateResourceAccessorsForAndroidUnitTestDebug")
     dependsOn("generateResourceAccessorsForAndroidDebug")
 }
+// compose bug since 1.7.0-beta03
+afterEvaluate {
+    tasks.named("generateReleaseLintVitalModel") {
+        dependsOn("releaseAssetsCopyForAGP")
+    }
+    tasks.named("lintVitalAnalyzeRelease") {
+        dependsOn("releaseAssetsCopyForAGP")
+    }
+}
 
 room {
     schemaDirectory("$projectDir/schemas")

diff --git a/app/shared/placeholder/common/Placeholder.kt b/app/shared/placeholder/common/Placeholder.kt
@@ -24,9 +24,9 @@ import androidx.compose.animation.core.Transition
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.rememberTransition
 import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.core.updateTransition
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -130,7 +130,7 @@ fun Modifier.basicPlaceholder(
     val transitionState = remember { MutableTransitionState(visible) }.apply {
         targetState = visible
     }
-    val transition = updateTransition(transitionState, "placeholder_crossfade")
+    val transition = rememberTransition(transitionState, "placeholder_crossfade")
 
     val placeholderAlpha by transition.animateFloat(
         transitionSpec = placeholderFadeTransitionSpec,

diff --git a/app/shared/src/androidMain/kotlin/ui/foundation/effects/ScreenOnEffect.android.kt b/app/shared/src/androidMain/kotlin/ui/foundation/effects/ScreenOnEffect.android.kt
@@ -3,7 +3,6 @@ package me.him188.ani.app.ui.foundation.effects
 import android.app.Activity
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import me.him188.ani.app.platform.LocalContext
 
 /**
@@ -13,7 +12,8 @@ import me.him188.ani.app.platform.LocalContext
  */
 @Composable
 actual fun ScreenOnEffectImpl() {
-    val activity = LocalContext.current as? Activity ?: LocalLifecycleOwner.current as? Activity
+    val activity =
+        LocalContext.current as? Activity ?: androidx.lifecycle.compose.LocalLifecycleOwner.current as? Activity
     DisposableEffect(activity?.window) {
         val window = activity?.window
         window?.addFlags(android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)

diff --git a/app/shared/src/commonMain/kotlin/ui/foundation/LongClickButtons.kt b/app/shared/src/commonMain/kotlin/ui/foundation/LongClickButtons.kt
@@ -21,16 +21,13 @@ import androidx.compose.material3.ButtonElevation
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.Typography
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -39,6 +36,7 @@ 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 me.him188.ani.app.ui.foundation.text.ProvideTextStyleContentColor
 
 /**
  * <a href="https://m3.material.io/components/buttons/overview" class="external" target="_blank">Material Design filled tonal button</a>.
@@ -182,13 +180,14 @@ fun CombinedClickButton(
     elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
     border: BorderStroke? = null,
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    interactionSource: MutableInteractionSource? = null,
     content: @Composable RowScope.() -> Unit
 ) {
+    @Suppress("NAME_SHADOWING")
+    val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
     val containerColor = colors.containerColor(enabled)
     val contentColor = colors.contentColor(enabled)
     val shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp
-    val tonalElevation = elevation?.tonalElevation(enabled) ?: 0.dp
     Surface(
         modifier = modifier.semantics { role = Role.Button }.combinedClickable(
             interactionSource = interactionSource,
@@ -204,24 +203,23 @@ fun CombinedClickButton(
         shape = shape,
         color = containerColor,
         contentColor = contentColor,
-        tonalElevation = tonalElevation,
         shadowElevation = shadowElevation,
         border = border,
     ) {
-        CompositionLocalProvider(LocalContentColor provides contentColor) {
-            ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {
-                Row(
-                    Modifier
-                        .defaultMinSize(
-                            minWidth = ButtonDefaults.MinWidth,
-                            minHeight = ButtonDefaults.MinHeight,
-                        )
-                        .padding(contentPadding),
-                    horizontalArrangement = Arrangement.Center,
-                    verticalAlignment = Alignment.CenterVertically,
-                    content = content,
+        ProvideTextStyleContentColor(
+            MaterialTheme.typography.labelLarge,
+            contentColor,
+        ) {
+            Row(
+                Modifier.defaultMinSize(
+                    minWidth = ButtonDefaults.MinWidth,
+                    minHeight = ButtonDefaults.MinHeight,
                 )
-            }
+                    .padding(contentPadding),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+                content = content,
+            )
         }
     }
 }
diff --git a/app/shared/src/commonMain/kotlin/ui/home/ButtomBar.kt b/app/shared/src/commonMain/kotlin/ui/home/ButtomBar.kt
@@ -33,7 +33,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.BottomAppBarDefaults
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.FloatingActionButton
@@ -42,6 +41,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.Surface
 import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.MutableState
@@ -122,7 +122,7 @@ abstract class TabBarScope<Tab> : RowScope {
                     .clip(RoundedCornerShape(8.dp))
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
-                        indication = rememberRipple(),
+                        indication = ripple(),
                         onClick = { selectedTab.value = tab },
                     )
                     .width(72.dp)

diff --git a/app/shared/src/commonMain/kotlin/ui/home/search/SubjectList.kt b/app/shared/src/commonMain/kotlin/ui/home/search/SubjectList.kt
@@ -39,12 +39,12 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -103,7 +103,7 @@ fun SubjectPreviewColumn(
                 },
                 imageUrl = remember(subject.id) { subject.images.landscapeCommon },
                 onClick = { navigator.navigateSubjectDetails(subject.id) },
-                Modifier.animateItemPlacement().height(180.dp),
+                Modifier.animateItem().height(180.dp),
             )
         }
 
@@ -155,7 +155,7 @@ fun SubjectPreviewCard(
             .fillMaxWidth()
             .clickable(
                 interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(),
+                indication = ripple(),
                 onClick = onClick,
             ),
         shape = shape,

diff --git a/app/shared/src/commonMain/kotlin/ui/home/search/SubjectSearchBar.kt b/app/shared/src/commonMain/kotlin/ui/home/search/SubjectSearchBar.kt
@@ -366,7 +366,7 @@ private fun SearchHistoryList(
                                 .clickable { onClickItem(history.id) }
                                 .padding(vertical = 12.dp)
                                 .padding(start = 16.dp, end = 8.dp)
-                                .animateItemPlacement(),
+                                .animateItem(),
                             horizontalArrangement = Arrangement.SpaceBetween,
                             verticalAlignment = Alignment.CenterVertically,
                         ) {

diff --git a/app/shared/src/commonMain/kotlin/ui/main/AniApp.kt b/app/shared/src/commonMain/kotlin/ui/main/AniApp.kt
@@ -11,12 +11,12 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.selection.toggleable
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Stable
@@ -172,7 +172,7 @@ fun RowScope.TabNavigationItem(
                     enabled = true,
                     role = Role.Checkbox,
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(),
+                    indication = ripple(),
                 ),
             contentAlignment = Alignment.Center,
         ) {

diff --git a/app/shared/src/commonMain/kotlin/ui/settings/SettingsPage.kt b/app/shared/src/commonMain/kotlin/ui/settings/SettingsPage.kt
@@ -12,7 +12,7 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SecondaryScrollableTabRow
+import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.Text
@@ -104,13 +104,15 @@ fun SettingsPage(
 
         // Pager with TabRow
         Column(Modifier.padding(topBarPaddings).fillMaxSize()) {
-            SecondaryScrollableTabRow(
+            ScrollableTabRow(
                 selectedTabIndex = pagerState.currentPage,
                 indicator = @Composable { tabPositions ->
                     TabRowDefaults.SecondaryIndicator(
                         Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                     )
                 },
+                contentColor = TabRowDefaults.secondaryContentColor,
+                containerColor = TabRowDefaults.secondaryContainerColor,
                 modifier = Modifier.fillMaxWidth(),
             ) {
                 val tabs by remember {

diff --git a/app/shared/src/commonMain/kotlin/ui/settings/framework/components/SliderItem.kt b/app/shared/src/commonMain/kotlin/ui/settings/framework/components/SliderItem.kt
@@ -11,11 +11,16 @@ import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.SliderDefaults.TickSize
 import androidx.compose.material3.Text
 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.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 
 
@@ -83,3 +88,55 @@ fun SettingsScope.SliderItem(
         )
     }
 }
+
+@SettingsDsl
+@Composable
+fun SettingsScope.ThinSliderItem(
+    value: Float,
+    onValueChange: (Float) -> Unit,
+    title: @Composable RowScope.() -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+    @IntRange(from = 0)
+    steps: Int = 0,
+    onValueChangeFinished: (() -> Unit)? = null,
+    colors: SliderColors = SliderDefaults.colors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    valueLabel: @Composable (() -> Unit)? = {
+        Text(value.toString())
+    },
+    description: @Composable (() -> Unit)? = null,
+    drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
+        with(this) { drawCircle(color = color, center = offset, radius = TickSize.toPx() / 2f) }
+    },
+) {
+    SliderItem(title, modifier, description, valueLabel) {
+        Slider(
+            value,
+            onValueChange,
+            Modifier,
+            enabled,
+            onValueChangeFinished,
+            colors,
+            interactionSource = interactionSource,
+            thumb = {
+                SliderDefaults.Thumb(
+                    interactionSource = interactionSource,
+                    colors = colors,
+                    enabled = enabled,
+                    thumbSize = DpSize(4.dp, 22.dp),
+                )
+            },
+            track = { sliderState ->
+                SliderDefaults.Track(
+                    colors = colors, enabled = enabled, sliderState = sliderState,
+                    thumbTrackGapSize = 3.dp,
+                    drawTick = drawTick,
+                )
+            },
+            valueRange = valueRange,
+            steps = steps,
+        )
+    }
+}