为 Material Design 3 创建主题以进行撰写时如何处理 Shape

Question

我目前有一个用 jetpack compose 编写的应用程序，它使用androidx.compose.material:material.

from / import androidx.compose.material.MaterialTheme

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
)

我现在计划迁移到 Material3：（androidx.compose.material3:material3我知道仍处于 alpha 版本）。

但是，主题可组合现在不再允许任何形状

from / import androidx.compose.material3.MaterialTheme

@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
)

我现在应该如何处理旧的形状定义？材料网站只讨论如何在 xml 和旧视图系统中做​​到这一点。

Answer 1

更新：现在对于形状，您可以使用内置的 Material api，只需在 toml 或 build.gradle.kts 中添加最新的 compose-bom 版本和material3 库

modifier = Modifier.clip(shape = MaterialTheme.shapes.medium),

或者说对于圆形形状，您可以使用

modifier = Modifier.clip(shape = CircleShape),

或者

modifier = Modifier.clip(shape = RoundedCornerShape(percent = 50)),

旧答案：

Material Design 3 / Material 你仍然没有形状。 因此，要使用形状创建局部合成，

在目录ui/theme中创建Shape.kt Kotlin 文件，并在该文件中粘贴以下代码

形状.kt

data class Shape(
    val default: RoundedCornerShape = RoundedCornerShape(0.dp),
    val small: RoundedCornerShape = RoundedCornerShape(4.dp),
    val medium: RoundedCornerShape = RoundedCornerShape(8.dp),
    val large: RoundedCornerShape = RoundedCornerShape(16.dp)
)

val LocalShape = compositionLocalOf { Shape() }

val MaterialTheme.shapeScheme: Shape
    @Composable
    @ReadOnlyComposable
    get() = LocalShape.current

现在，在撰写中使用形状

shape = MaterialTheme.shapeScheme.large

例如。在卡片撰写中

Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(all = 16.dp),
        shape = MaterialTheme.shapeScheme.large,
        backgroundColor = MaterialTheme.colorScheme.surface,
        border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.inverseOnSurface),
        elevation = 1.dp
    ) {
...
}

编辑： 检查这个