Recompose 方法在 Jetpack Compose 中不起作用

Posted

技术标签:

【中文标题】Recompose 方法在 Jetpack Compose 中不起作用【英文标题】:Recompose method not working in Jetpack Compose 【发布时间】:2021-07-05 05:53:18 【问题描述】:

我正在尝试根据我的要求进行可组合重组,如:

  @Composable
    fun recomposeDemo() 
        var countState = 0
        Recompose  recompose ->
            Column  //Error in this line
                
                Text("CountState is: " + countState)
                Button(onClick =  countState++ ) 
                    Text("Count up")
                
                Button(onClick = 
                    recompose()
                ) 
                    Text("I want to recompose")
                
            
        
    

此处提供此代码:Site having this example

但是上面的代码会产生如下错误:

@Composable invocations can only happen from the context of a @Composable function

这是因为某些版本问题吗?我正在使用最新版本的 Compose,即。 “1.0.0-beta03”。 如何正确使用此版本的“Recompose”组合?

这是我的应用级 build.gradle:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android 
    compileSdkVersion 30

    defaultConfig 
        applicationId "com.example.voodlee0125"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "0.1.25"
        multiDexEnabled true

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    

    buildFeatures 
        viewBinding = true
        compose true
    

    composeOptions 
        kotlinCompilerExtensionVersion '1.0.0-beta03'
    

    compileOptions 
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    

    kotlinOptions 
        jvmTarget = JavaVersion.VERSION_1_8.toString()
        useIR = true

    

    buildTypes 
        debug 
            minifyEnabled false
            debuggable true
//            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        
        release 
            minifyEnabled false
            debuggable true
//            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        
    

    compileOptions 
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    


dependencies 
    def lifecycle_version = "2.3.1"

    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation "androidx.drawerlayout:drawerlayout:1.1.1"
    implementation "androidx.navigation:navigation-fragment:2.3.3"
    implementation "androidx.navigation:navigation-ui:2.3.3"
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
    implementation 'com.shawnlin:number-picker:2.4.11'
    implementation 'com.karumi:dexter:6.2.1'
    implementation 'com.github.IslamKhSh:CardSlider:1.0.1'
    implementation 'com.intuit.sdp:sdp-android:1.0.6'
    implementation 'com.intuit.ssp:ssp-android:1.0.6'
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
    implementation 'com.github.barteksc:android-pdf-viewer:2.8.2'
    implementation 'com.google.android.gms:play-services-auth:19.0.0'
    implementation 'com.google.android.gms:play-services-auth-api-phone:17.5.0'
    implementation 'net.yslibrary.keyboardvisibilityevent:keyboardvisibilityevent:3.0.0-RC2'
    // Lottie dependency
    implementation "com.airbnb.android:lottie:3.4.0"

    //Autostart settings open
    implementation 'com.thelittlefireman:AppKillerManager:2.1.1'

    // Retrofit
    implementation 'com.squareup.retrofit2:retrofit:2.3.0'
    implementation 'com.squareup.okhttp3:logging-interceptor:4.9.0'

    // JSON Parsing
    implementation 'com.google.code.gson:gson:2.8.6'
    implementation 'com.squareup.retrofit2:converter-gson:2.1.0'

    implementation 'com.android.support:multidex:1.0.3'

    implementation 'androidx.cardview:cardview:1.0.0'

    // ViewModel
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
    // LiveData
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"

    implementation "androidx.core:core-ktx:1.3.2"
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.4.30"

    implementation "org.koin:koin-core:2.2.2"
    implementation "org.koin:koin-androidx-viewmodel:2.2.2"
    implementation "androidx.datastore:datastore-preferences:1.0.0-alpha08"
    implementation 'com.github.pwittchen:swipe-rx2:0.3.0'
    implementation "androidx.compose.material:material:1.0.0-beta03"
    implementation "androidx.compose.ui:ui-tooling:1.0.0-beta03"
    implementation "androidx.compose.ui:ui:1.0.0-beta03"
    implementation "androidx.activity:activity-compose:1.3.0-alpha05"
    implementation "androidx.compose.animation:animation:1.0.0-beta03"
    implementation "androidx.compose.animation:animation-core:1.0.0-beta03"
    implementation "androidx.ui:ui-framework:0.1.0-dev03"
    implementation "androidx.compose.runtime:runtime-livedata:1.0.0-beta03"


    testImplementation 'junit:junit:4.13.1'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'



repositories 
    mavenCentral()

【问题讨论】:

【参考方案1】:

onClick 不可组合。这是一个常规函数。

onClick lambda 呢?

仅围绕可组合函数创建重构范围。事件处理程序,如 Button 的 onClick,是不可组合的,它们只是常规函数。当框架调用点击处理程序时,它是在任何重组范围之外完成的。

您可以在Scoped recomposition in Jetpack Compose — what happens when state changes? 文章中阅读更多相关信息。

按照@Gabriele Mariotti 的建议来修改您的代码。

【讨论】:

【参考方案2】:

不确定您的问题。 您不能在 onClick lambda 上使用 Composable 函数, 但你可以重写你的代码:

var countState = remember mutableStateOf(0)

Column()

    Text("CountState is: " + countState.value)
    Button(onClick =  countState.value++ ) 
        Text("Count up")
    

当你点击按钮时:

countState MutableState 值已更改。 由于countStateText 被重构。

【讨论】:

有没有办法可以使用“重构”手动重构?

以上是关于Recompose 方法在 Jetpack Compose 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React Recompose:在 WithStateProps 中创建的方法不可访问

如何在 React-Recompose 应用程序中将事件处理程序传递给 React-node

[Recompose] Lock Props using Recompose -- withProps

[Recompose] Transform Props using Recompose --mapProps

React JS:HOC(重组)或 Redux [关闭]

[Recompose] Add Lifecycle Hooks to a Functional Stateless Component using Recompose