默认样式 Jetpack Compose

Question

有人知道如何将默认样式更改为按钮吗？ xml 中的样式：

<item name="materialButtonStyle">@style/ButtonStyle</item>

我想将其转换为 Jetpack Compose。

在默认的 compose 示例中（Android Studio Canary）您可以看到 ui.theme 文件夹，它类似于值文件夹，但没有字符串和维度。那么如何将 Strings 和 Dimens 添加到这个 compose 文件夹中呢？

Answer 1

如果您查看 Button 源代码，您会注意到它使用了几个您可以自定义的默认值（通过参数或自定义样式）。

shape：使用MaterialTheme.shapes.small（您可以在样式中自定义此字段）；

val shapes = Shapes(
    small = CutCornerShape(4.dp), // << here
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

colors：这是 ButtonColors 的一个实例，它提供 backgroundColor、contentColor、disabledBackgroundColor 和 disabledContentColor.查看 Button.buttonColors 函数以了解如何自定义按钮的颜色。
在文本方面，Button 组件从 MaterialTheme.typography.button 获取文本样式，因此您可以在样式中覆盖此字段以自定义按钮的文本。

val typography = Typography(
    ...
    button = defaultTypography.button.copy(
        fontFamily = yourFontFamily, 
        color = Color.Yellow
    )
)

对于文本和尺寸，您可以继续使用 XML 文件 (res/values) 并分别使用 stringResource(id) 和 dimensionResource(id) 函数引用它们。

Answer 2

如中所述，您可以在主题或按钮参数中自定义形状、排版和颜色。

您也可以覆盖这些值并构建默认按钮样式。
类似于：

@Composable
fun DefaultButtonStyle(content: @Composable () -> Unit) {
    MaterialTheme(
        //override the shape
        shapes = MaterialTheme.shapes.copy(small = CutCornerShape(12.dp)),
        //Override the typography.button using the merge method
        typography = MaterialTheme.typography.copy(
            button = MaterialTheme.typography.button.merge(TextStyle(fontSize = 20.sp))),
        //override the colors define in the material theme
        colors = MaterialTheme.colors.copy(
            primary = Color.Yellow,
            onPrimary = Color.Blue)
    ) {
        content()
    }
}

然后将其用于：

DefaultButtonStyle() {
    Button(onClick = { /*....*/ }) {
        Text(text = "BUTTON")
    }
}

默认样式 Jetpack Compose

Default Style Jetpack Compose

android

android-button

android-jetpack-compose