如何在 Kotlin 中实现确认叠加？

Question

我需要一个简单的示例来说明如何在 Kotlin 中使用确认叠加层进行佩戴。不需要按钮，只是一个 2-3 行的对话框，提示整个屏幕 3 秒，然后消失。

这是我可以在 developer.android.com

上找到的

// Defaults to SUCCESS_ANIMATION
new ConfirmationOverlay().showOn(myActivity);

new ConfirmationOverlay()
    .setType(ConfirmationOverlay.OPEN_ON_PHONE_ANIMATION)
    .setDuration(3000)
    .setMessage("Opening...")
    .setOnAnimationFinishedListener(new ConfirmationOverlay.OnAnimationFinishedListener() {
      @Override
      public void onAnimationFinished() {
          // Finished animating and the content view has been removed from myActivity.
      }
    }).showOn(myActivity);

// Default duration is DEFAULT_ANIMATION_DURATION_MS
new ConfirmationOverlay()
    .setType(ConfirmationOverlay.FAILURE_ANIMATION)
    .setMessage("Failed")
    .setOnAnimationFinishedListener(new ConfirmationOverlay.OnAnimationFinishedListener() {
      @Override
      public void onAnimationFinished() {
          // Finished animating and the view has been removed from myView.getRootView().
      }
    }).showAbove(myView);

Answer 1

根据 Dialogs 的 UX 指南，在为 Wear 开发时，您似乎应该使用 Confirmation 可组合项。

以下是从 kdocs 中提取的示例用法：

import androidx.compose.animation.graphics.res.animatedVectorResource
import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
import androidx.compose.animation.graphics.vector.AnimatedImageVector
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.dialog.Confirmation

val animation = AnimatedImageVector.animatedVectorResource(R.drawable.open_on_phone_animation)
Confirmation(
    onTimeout = {
        /* Do something e.g. navController.popBackStack() */
    },
    icon = {
        // Initially, animation is static and shown at the start position (atEnd = false).
        // Then, we use the EffectAPI to trigger a state change to atEnd = true,
        // which plays the animation from start to end.
        var atEnd by remember { mutableStateOf(false) }
        DisposableEffect(Unit) {
            atEnd = true
            onDispose {}
        }
        Image(
            painter = rememberAnimatedVectorPainter(animation, atEnd),
            contentDescription = "Open on phone",
            modifier = Modifier.size(48.dp)
        )
    },
    durationMillis = animation.totalDuration * 2L,
) {
    Text(
        text = "Body text displayed here " + "(swipe right to dismiss)",
        textAlign = TextAlign.Center
    )
}