为什么Android Studio Kotlin Compose模板运行时文字显示异常

差异原因 #

Compose预览默认和实际运行环境存在配置差异，出现效果不一致属于正常情况，核心原因通常有三点：

• 外层布局结构不统一：预览代码中通常会自动或手动给组件套上带fillMaxSize属性的父布局、并添加居中配置，而Activity的setContent代码中如果没有添加相同的外层布局逻辑，就会出现预览居中、运行时不居中的问题。
• 主题配置不统一：如果运行时代码没有给内容套上和预览一致的主题，或者主题内的字体尺寸、样式配置在两侧不统一，就会出现文字大小差异。
• 系统参数不匹配：默认预览使用固定的屏幕尺寸、DPI、字体缩放比例，和实际运行的真机/模拟器参数不一致，也会引发尺寸偏差。

实现真实预览的方法 #

1. 统一代码结构 #

保证@Preview注解函数内部的根布局、主题包裹逻辑，和ActivitysetContent中的代码完全一致，不要给预览单独加额外的布局修饰配置。

2. 自定义预览参数匹配设备 #

给@Preview注解添加参数，手动匹配测试设备的实际配置，示例配置如下：

@Preview(
    showSystemUi = true,
    device = "spec:width=1080px,height=2340px,dpi=440",
    fontScale = 1f,
    showBackground = true
)

可以根据自己测试用的设备参数修改对应数值，让预览环境和真机环境完全对齐。

3. 直接部署预览到设备 #

Android Studio预览窗口右上角有部署预览到设备的按钮，点击后会将当前预览的组件直接安装到连接的真机/模拟器上运行，显示的就是完全真实的运行效果，不需要启动整个应用。

内容的提问来源于stack exchange，提问作者raddevus