material-design - 为 Compose 创建 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
)

我现在应该如何处理我的旧形状定义？ Material 网站只讨论如何在 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

现在，在撰写中使用形状

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