Kotlin Compose自定义Donut组件预览失败：无法找到@Preview函数

你的donut函数是定义在MainActivity类内部的成员函数，Compose预览工具无法正确识别依赖类实例的成员函数作为预览目标，因此出现找不到预览的报错。

解决方法 #

方法1：将函数改为顶层函数 #

把donut函数移到MainActivity类外部，作为文件的顶层函数（不嵌套在任何类、object内部）：

// 放在MainActivity类外部的文件顶层位置
@Preview
@Composable
fun donut(_size: Dp = 120.dp, _padding: Dp = 5.dp) {
    Box(modifier = Modifier
        .size(_size)
        .clip(CircleShape)
        .background(Color.Green)
        .padding(_padding)
        .clip(CircleShape)
        .background(Color.Red))
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row() {
                donut(_size = 100.dp, _padding = 10.dp)
            }
        }
    }
}

方法2：将函数放在companion object内部 #

如果不想移动函数位置，可将其放入MainActivity的companion object中，让它成为静态可访问的函数：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row() {
                donut(_size = 100.dp, _padding = 10.dp)
            }
        }
    }

    companion object {
        @Preview
        @Composable
        fun donut(_size: Dp = 120.dp, _padding: Dp = 5.dp) {
            Box(modifier = Modifier
                .size(_size)
                .clip(CircleShape)
                .background(Color.Green)
                .padding(_padding)
                .clip(CircleShape)
                .background(Color.Red))
        }
    }
}

额外检查项 #

• 确保Android Studio的Compose预览插件为最新版本，必要时重启预览工具或Android Studio
• 确认函数名、包名无拼写错误

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