[英]what is equivalent to banner in android (jetpack compose)
我在Material Design找到了这个,但它没有针对 android 的实现。
在 android 中实现这一点的最佳方法是什么,尤其是使用 Jetpack Compose?
先感谢您。
版本 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",
)
}
截屏
要使横幅滑入/滑出,可以使用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()
}
}
}
横幅看起来像这样:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.