为撰写的 Material Design 3 创建主题时如何处理形状

Question

我目前有一个用 jetpack compose 编写的应用程序，它使用来自 androidx.compose.material:material 的 Material-Theming-Support。

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 和 old view-system 中做到这一点。

Answer 1

Material Design 3 / Material You still don't have shapes. 所以要使用形状创建composition local，

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

Shape.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

现在，在 compose 中使用形状

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
    ) {
...
}

编辑： Check this