默认样式 Jetpack 组合

Question

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

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

我想将其转换为 Jetpack Compose。

在默认撰写示例（Android Studio Canary）中，您可以看到 ui.theme 文件夹，它是 values 文件夹的模拟，但没有字符串和维度。那么如何将字符串和维度添加到这个 compose 文件夹中呢？

Answer 1

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

您还可以覆盖这些值并构建默认按钮样式。
比如：

@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")
    }
}

Answer 2

如果您查看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 文件（资源/值）并分别使用 stringResource(id) 和 dimensionResource(id) 函数引用它们。