什么相当于 android 中的横幅（Jetpack 撰写）

Question

我正在尝试在 android 中实现一个看起来像这样的横幅

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

在 android 尤其是 Jetpack Compose 中实现此功能的最佳方法是什么？

提前致谢。

Answer 1

版本 1.0.3 中没有 Banner 可组合项。

为横幅创建自定义可组合项非常简单。

示例代码

自定义横幅

@Composable
fun Banner(
    text: String,
    button1Text: String? = null,
    button2Text: String? = null,
    button1ClickListener: (() -> Unit)? = null,
    button2ClickListener: (() -> Unit)? = null,
) {
    Column {
        Text(
            text = text,
            modifier = Modifier.padding(16.dp),
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    start = 8.dp,
                    end = 8.dp,
                    bottom = 8.dp,
                ),
            horizontalArrangement = Arrangement.End,
        ) {
            button1Text?.let {
                TextButton(
                    onClick = if (button1ClickListener != null) {
                        button1ClickListener
                    } else {
                        {}
                    }
                ) {
                    Text(
                        text = button1Text,
                    )
                }
            }
            button2Text?.let {
                TextButton(
                    onClick = if (button2ClickListener != null) {
                        button2ClickListener
                    } else {
                        {}
                    }
                ) {
                    Text(
                        text = button2Text,
                    )
                }
            }
        }
        Divider()
    }
}

用法

@Composable
fun BannerUsage() {
    Banner(
        text = "There was a problem processing a transaction on your credit card.",
        button1Text = "FIX IT",
        button2Text = "LEARN MORE",
    )
}

截图

Answer 2

要制作横幅幻灯片 in/out，可以使用 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()
        }
    }
}

横幅看起来像这样：

什么相当于 android 中的横幅（Jetpack 撰写）

what is equivalent to banner in android (jetpack compose)

android

banner

android-jetpack-compose