当前位置：首页 > news >正文

jetpack compose的@Preview和自定义主题

news 2025/6/30 8:01:00

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 提供了多种参数来定制预览的行为和外观：

name：设置预览的名称，方便在预览窗口中区分不同的预览。
showBackground：布尔值，设置为 true 可以显示背景颜色。
backgroundColor：设置预览背景颜色，使用 16 进制表示颜色（0xAARRGGBB）。
widthDp 和 heightDp：设置预览窗口的宽度和高度，以 dp 为单位。
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.Rval 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组件}}}
}