什么相当于 android 中的横幅（jetpack compose）

Question

我正在尝试在 android 中实现一个如下所示的横幅

我在Material Design找到了这个，但它没有 Android 的实现。

在 android 中实现这一点的最佳方法是什么，特别是使用 Jetpack Compose？

先感谢您。

Answer 1

要使横幅滑入/滑出，可以使用AnimatedVisibility API。

这是一个实现示例：

class AnimationTestActivity : AppCompatActivity() {

    @ExperimentalAnimationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val isVisible = mutableStateOf(false)

        setContent {
            Column {
                AnimatedBanner(isVisible)
                Column(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        modifier = Modifier
                            .padding(8.dp)
                            .align(CenterHorizontally),
                        onClick = { isVisible.value = !isVisible.value }) {
                        Text(text = "Toggle")
                    }
                }
            }
        }
    }
}

@ExperimentalAnimationApi
@Composable
fun AnimatedBanner(isVisible: MutableState<Boolean>) {
    AnimatedVisibility(
        visible = isVisible.value,
        enter = expandVertically(),
        exit = shrinkVertically()
    ) {
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 12.dp),
                text = "Question text"
            )

            Row(
                modifier = Modifier
                    .padding(bottom = 8.dp)
                    .align(Alignment.End)
            ) {
                TextButton(
                    modifier = Modifier.padding(end = 8.dp),
                    onClick = { isVisible.value = false }
                ) {
                    Text(text = "Option 1")
                }
                TextButton(
                    modifier = Modifier.padding(end = 8.dp),
                    onClick = { isVisible.value = false }
                ) {
                    Text(text = "Option 2")
                }
            }
            Divider()
        }
    }
}

横幅看起来像这样：