Android Compose：MainActivity调用带参donut及预览异常求助

问题概述 #

在MainActivity中定义了带默认参数的@Composable函数donut，在onCreate的setContent内调用正常，但添加@Preview注解后出现「无法找到@Preview 'com.pelicancolder.chapter1_03.MainActivity.donut'」错误，重建项目后仍存在。使用环境：Compose 1.1.1、Kotlin 1.6.10、jvm_target 1.8、Android Studio Dolphin | 2021.3.1 Patch 1。

相关代码 #

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

    @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))
    }
}

根目录build.gradle配置 #

buildscript {
    ext {
        compose_ui_version = '1.1.1'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
}

解决方案 #

1. 拆分Preview与业务Composable函数 #

Compose的Preview系统对带参数的Composable函数支持有限，即使有默认参数也可能出现识别异常。最直接的解决方式是单独创建无参的Preview函数，内部调用带默认参数的业务函数：

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

    @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))
    }

    @Preview
    @Composable
    fun DonutPreview() {
        donut() // 使用默认参数调用业务函数
    }
}

若需要预览多组参数，可使用@PreviewParameter提供参数集合：

// 定义参数提供器
class DonutPreviewParameterProvider : PreviewParameterProvider<Pair<Dp, Dp>> {
    override val values = sequenceOf(
        Pair(120.dp, 5.dp),
        Pair(100.dp, 10.dp)
    )
}

// 带参数的Preview函数
@Preview
@Composable
fun DonutPreview(@PreviewParameter(DonutPreviewParameterProvider::class) params: Pair<Dp, Dp>) {
    donut(_size = params.first, _padding = params.second)
}

2. 检查模块级build.gradle配置 #

确保模块级build.gradle中正确配置了Compose相关插件和依赖（这是很多预览异常的根源）：

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 32 // 匹配项目实际使用的SDK版本

    defaultConfig {
        applicationId "com.pelicancolder.chapter1_03"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true // 启用Compose功能
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1' // 与根目录定义的compose_ui_version一致
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.material:material:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.4.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
}

3. 清理IDE缓存并重建项目 #

• 执行Build > Clean Project
• 执行Build > Rebuild Project
• 重启Android Studio，避免IDE缓存导致的识别异常

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