Jetpack Compose @Composable @Preview设计预览报空指针渲染异常

崩溃的核心原因是Composable函数直接绑定了Activity的成员上下文：

• 你把createViews Composable定义为MainActivity的内部成员函数，函数内直接引用了Activity持有的resources对象加载图片。
• @Preview 渲染流程不会实例化MainActivity、不会走Activity生命周期初始化，此时函数内引用的resources对应的Activity实例是空值，调用getResources()方法直接触发空指针。
• 从抛出的堆栈可以确认，崩溃点正好落在代码里imageFromResource(res = resources, resId = R.drawable.logo_2) 这一行。

1. 解耦Composable与Activity的依赖 #

不要把通用UI的Composable写在Activity类内部，将createViews移到类外部作为独立可复用函数，并且不再直接硬编码引用Activity的resources，改用Compose提供的环境注入机制获取Context：

• 对应你当前使用的composeVersion = "1.0.0-alpha10" 版本，获取Context的方式是AmbientContext.current，预览环境会自动注入可用的Context实例，不会出现空值。

示例代码：

// 独立于Activity的Composable，不再持有Activity引用
@Composable
fun HomeContent() {
    // 从环境中自动获取Context，兼容真机运行、预览两种场景
    val context = AmbientContext.current
    ScrollableColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color(0xFFf2f2f2))
    ) {
        Image(
            bitmap = imageFromResource(
                res = context.resources,
                resId = R.drawable.logo_2
            ),
            modifier = Modifier
                .size(100.dp, 200.dp)
                .align(alignment = Alignment.CenterHorizontally),
            contentScale = ContentScale.Crop
        )
        Column(Modifier.padding(20.dp)) {
            Text(
                text = "Archi",
                style = TextStyle(
                    color = Color(0xFFffd600),
                    fontSize = TextUnit.Companion.Sp(20)
                )
            )
            Spacer(modifier = Modifier.padding(10.dp))
            Text(
                text = "test",
                style = TextStyle(
                    color = Color(0xFFf4511e),
                    fontSize = TextUnit.Companion.Sp(20)
                )
            )
            Spacer(modifier = Modifier.padding(10.dp))
            Text(
                text = "xxx-xxxxxxx",
                style = TextStyle(
                    color = Color(0xFF00e676),
                    fontSize = TextUnit.Companion.Sp(20)
                )
            )
        }
    }
}

2. 调整Activity与预览的调用逻辑 #

Activity的页面渲染、预览函数都直接调用独立的HomeContent函数即可，不需要再持有内部Composable的引用：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HomeContent()
        }
    }

    @Preview
    @Composable
    fun DefaultPreview() {
        HomeContent()
    }
}

你使用的是Compose早期alpha版本，API命名和后续稳定版存在差异：

• alpha10版本获取Context用AmbientContext.current，稳定版才替换为LocalContext.current，不要照搬稳定版写法避免编译错误。
• 不要在Composable函数中直接引用任何Android组件（Activity、Fragment等）的成员变量，所有需要跨场景（真机、预览）使用的系统资源，都通过Compose的环境注入机制获取，才能保证预览正常工作。

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