升级到 beta-01 后，用 Jetpack Compose 编写的键盘上的动画和效果损坏 [英] Animations and Effects broken on Keyboard written in Jetpack Compose after upgrading to beta-01

问题描述

在将完全用 Jetpack Compose 编写的键盘从 Compose 版本 alpha-11 更新为 beta-01 后，我遇到了问题.

在升级之前，用户界面如您预期的那样运行良好.涟漪显示得很好.升级后的动画和效果(如按下按钮)无法正确播放(波纹效果似乎卡住).看一看:

这是期望的行为以及版本升级前的样子:

注意:ComposeKeyboardView 之外的相同代码运行良好.此外，在 Jetpack Compose alpha-11 和 beta-01 之前，相同的代码运行良好.我不确定这是错误还是我自己可以解决问题.我感谢任何帮助或提示来恢复所需的行为.

您可以使用以下代码重现该问题:

键盘.kt

@Composable有趣的键盘(){柱子(修饰符.fillMaxWidth().height(200.dp).background(Color.Gray),垂直排列 = 排列.中心，水平对齐 = Alignment.CenterHorizo​​ntally){文本(颜色= Color.Black，文本=这应该像一个键盘")Button(modifier = Modifier.width(250.dp),onClick = { }) {文本(文本=一个按钮")}}}

ComposeKeyboardView.kt

class ComposeKeyboardView 构造函数(上下文:上下文，) : AbstractComposeView(context) {@可组合覆盖有趣的内容(){键盘()}}

IMEService.kt

IMEService 类:InputMethodService()、LifecycleOwner、ViewModelStoreOwner、SavedStateRegistryOwner {覆盖乐趣 onCreateInputView(): View {val 视图 = ComposeKeyboardView(this)window!!.window!!.decorView.let {decorView ->ViewTreeLifecycleOwner.set(decorView, this)ViewTreeViewModelStoreOwner.set(decorView, this)ViewTreeSavedStateRegistryOwner.set(decorView, this)}返回视图}//生命周期方法私有变量生命周期注册表:LifecycleRegistry = LifecycleRegistry(this)覆盖乐趣 getLifecycle(): Lifecycle {返回生命周期注册表}私人乐趣 handleLifecycleEvent(event: Lifecycle.Event) =LifecycleRegistry.handleLifecycleEvent(事件)覆盖乐趣 onCreate() {super.onCreate()savedStateRegistry.performRestore(null)handleLifecycleEvent(Lifecycle.Event.ON_CREATE)}覆盖乐趣 onDestroy() {super.onDestroy()handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)}//ViewModelStore 方法私人 val 商店 = ViewModelStore()覆盖乐趣 getViewModelStore(): ViewModelStore = store//SaveStateRegestry 方法private val savedStateRegistry = SavedStateRegistryController.create(this)覆盖乐趣 getSavedStateRegistry(): SavedStateRegistry = savedStateRegistry.savedStateRegistry

不要忘记将 IMEService 添加到您的 AndroidManifest.xml:

I ran into a problem after updating my keyboard written completely in Jetpack Compose from Compose version alpha-11 to beta-01.
Before the upgrade, the UI worked just fine as you would expect. Ripples were displayed fine.
After the upgrade animations and effects (like button pressed) don't play correctly (Ripple effects seem to get stuck).
Take a look:

This is the desired behavior and how it looked like before the version upgrade:

Note: The same code outside of ComposeKeyboardView worked perfectly fine. Also, the same code worked perfectly fine before Jetpack Compose alpha-11 and beta-01.
I'm not sure if it is a bug or if I can fix the problem myself.
I appreciate any help or hints to restore the desired behavior.
You can reproduce the problem using the following code:
Keyboard.kt
@Composable
fun Keyboard() {
    Column(
        Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(Color.Gray),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(color = Color.Black, text = "This should resemble a keyboard")
        Button(modifier = Modifier.width(250.dp),onClick = {  }) {
            Text(text = "A Button")
        }
    }
}
ComposeKeyboardView.kt
class ComposeKeyboardView constructor(
    context: Context,

    ) : AbstractComposeView(context) {

    @Composable
    override fun Content() {
        Keyboard()
       
    }
}
IMEService.kt

class IMEService : InputMethodService(), LifecycleOwner, ViewModelStoreOwner,
    SavedStateRegistryOwner {

    override fun onCreateInputView(): View {
        val view = ComposeKeyboardView(this)
        window!!.window!!.decorView.let { decorView ->
            ViewTreeLifecycleOwner.set(decorView, this)
            ViewTreeViewModelStoreOwner.set(decorView, this)
            ViewTreeSavedStateRegistryOwner.set(decorView, this)
        }
        return view
    }


    //Lifecycle Methods

    private var lifecycleRegistry: LifecycleRegistry = LifecycleRegistry(this)

    override fun getLifecycle(): Lifecycle {
        return lifecycleRegistry
    }


    private fun handleLifecycleEvent(event: Lifecycle.Event) =
        lifecycleRegistry.handleLifecycleEvent(event)

    override fun onCreate() {
        super.onCreate()
        savedStateRegistry.performRestore(null)
        handleLifecycleEvent(Lifecycle.Event.ON_CREATE)
    }



    override fun onDestroy() {
        super.onDestroy()
        handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
    }


    //ViewModelStore Methods
    private val store = ViewModelStore()

    override fun getViewModelStore(): ViewModelStore = store

    //SaveStateRegestry Methods

    private val savedStateRegistry = SavedStateRegistryController.create(this)

    override fun getSavedStateRegistry(): SavedStateRegistry = savedStateRegistry.savedStateRegistry
Don't forget to add the IMEService to your AndroidManifest.xml:
<application>
[...]
<service
            android:name=".IMEService"
            android:label="Example Comopose IME"

            android:permission="android.permission.BIND_INPUT_METHOD">
            <intent-filter>
                <action android:name="android.view.InputMethod" />
            </intent-filter>

            <meta-data
                android:name="android.view.im"
                android:resource="@xml/method" />
        </service>
</application>
app\build.gradle
[...]
dependencies {
    def compose_version = "1.0.0-beta01"  
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation "androidx.activity:activity-compose:1.3.0-alpha03"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0'
}
Edit: Same problem in compose-beta02
Or you can find all code here and clone it directly
解决方案
I downloaded your code and saw your comment in the Compose's bug tracker.
Looks like that if you do the following in your IMEService class, the animation works.
override fun onCreate() {
    super.onCreate()
    savedStateRegistry.performRestore(null)
    handleLifecycleEvent(Lifecycle.Event.ON_RESUME) // << here
}


                        
这篇关于升级到 beta-01 后，用 Jetpack Compose 编写的键盘上的动画和效果损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！