jetpack compose的@Preview和自定义主题

1.@Preview

@Preview可以在 Android Studio 的预览窗口中实时查看和调试 UI 组件。

基本使用

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview



@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

@Preview
@Composable
fun DefaultPreview() {
    Greeting("World")
}

上述代码会在预览窗口中显示 Greeting 组件，文本内容为 “Hello, World!”。

预览参数

@Preview 提供了多种参数来定制预览的行为和外观：

1. name：设置预览的名称，方便在预览窗口中区分不同的预览。
2. showBackground：布尔值，设置为 true 可以显示背景颜色。
3. backgroundColor：设置预览背景颜色，使用 16 进制表示颜色（0xAARRGGBB）。
4. widthDp 和 heightDp：设置预览窗口的宽度和高度，以 dp 为单位。
5. fontScale：设置字体缩放比例，模拟不同的系统字体大小设置。

示例代码

@Preview(
    name = "Default Preview",
    showBackground = true,
    backgroundColor = 0xFFEFEFEF, // 灰色背景
    widthDp = 320,
    heightDp = 480,
    fontScale = 1.5f // 字体放大 1.5 倍
)
@Composable
fun CustomPreview() {
    MaterialTheme{
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Greeting("Compose")
        }
    }
}

多个预览

@Preview(name = "Phone Preview", device = "spec:width=411dp,height=891dp,dpi=420")
@Preview(name = "Tablet Preview", device = "spec:width=1280dp,height=800dp,dpi=240")
@Composable
fun MultiDevicePreview() {
    MaterialTheme {
        Greeting("Multi-device")
    }
}

横屏预览

@Preview(name = "Landscape Preview", widthDp = 640, heightDp = 360)
@Composable
fun LandscapePreview() {
    MaterialTheme {
        Greeting("Landscape")
    }
}

2. 自定义主题示例

在Jetpack Compose中自定义主题涉及到定义自己的颜色、字体和形状等属性，并将它们应用到整个应用程序中。

1. 定义颜色

在src/main/java/包名/ui/theme/Color.kt中创建或修改文件：

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Shapes
import androidx.compose.material.Typography
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetsnack.R

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val LightGreen = Color(0xFFC8E6C9)
val DarkGreen = Color(0xFF388E3C)

2. 定义字体

在src/main/java/包名/ui/theme/Type.kt中创建或修改文件：

val AppFontFamily = FontFamily(
    fonts = listOf(
        Font(R.font.karla_bold),
        Font(R.font.karla_regular, FontWeight.Bold)
    )
)

val Typography = Typography(
    body1 = TextStyle(
        fontFamily = AppFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    button = TextStyle(
        fontFamily = AppFontFamily,
        fontWeight = FontWeight.Bold,
        fontSize = 14.sp
    ),
    caption = TextStyle(
        fontFamily = AppFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
)

3. 定义形状

定义应用程序的形状样式。在src/main/java/包名/ui/theme/Shape.kt中创建或修改文件：

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(16.dp)
)

4. 应用主题

在src/main/java/包名/ui/theme/Theme.kt中创建或修改文件：

private val ColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = LightGreen,
    surface = LightGreen,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = DarkGreen,
    onSurface = DarkGreen,
)

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = ColorPalette,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

5. 使用主题

在MainActivity或其他@Composable函数中，使用AppTheme包裹UI组件：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                // UI组件
            }
        }
    }
}