Jetpack Compose UI 底部弹窗实现

这篇具有很好参考价值的文章主要介绍了Jetpack Compose UI 底部弹窗实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用Compose Ui的Dialog 默认是居中显示屏幕中间。

实现思路:

1.弹窗完全自定义一个全屏弹窗;

2.显示内容显示在底部区域。

3.点击其他空白区域关闭弹窗。文章来源地址https://www.toymoban.com/news/detail-513421.html

var showDialog by remember {mutableStateOf(false)}

Button(onClick = { showDialog = true }) {
    Text(text = "显示弹窗")
}

if(showDialog){
     Dialog(onDismissRequest = { }, properties =DialogProperties(usePlatformDefaultWidth = false)) {
           Box(Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .clickable {
                        showDialog = false
                     }) {
                 Text(text = "显示自己的内容",
                        Modifier
                            .fillMaxWidth()
                            .height(300.dp)
                            .clickable { }
                            .align(Alignment.BottomCenter)
                            .background(Color.Cyan))
                }

            } 
}

到了这里,关于Jetpack Compose UI 底部弹窗实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Jetpack Compose 深入探索系列四: Compose UI

    通过 Compose runtime 集成 UI Compose UI 是一个 Kotlin 多平台框架。它提供了通过可组合函数发出 UI 的构建块和机制。除此之外,这个库还包括 Android 和 Desktop 源代码,为 Android 和 Desktop 提供集成层。 JetBrains积极维护Desktop代码库,而Google维护Android和通用代码库。Android和Desktop源代码

    2024年02月12日
    浏览(48)
  • 使用 Jetpack Compose 实现一个计算器APP

    在上一篇文章中,我们说到打算使用 compose 实现一个计算器 APP,最开始打算做一个经典的 LCD 基础计算器,后来觉得好像没啥特色,最终决定还是改成仿微软计算器。 不过,微软计算器的功能太多了,仿制的工程量不小,所以我打算只仿我认为最核心的两个模式:标准模式和

    2024年02月05日
    浏览(64)
  • element-ui dialog弹窗 设置点击空白处不关闭

    根据官网提供方法 场景:vue实现的网站有两个弹窗同时出现时,关闭报警,批量进度条弹窗也关闭了, 1、每一个页面都有可能出现的报警弹窗, 2、页面a批量操控硬件添加操作的进度条弹窗 开始以为是因为点击报警弹窗,相当于点击modal(空白处)所以导致关闭报警弹窗的同

    2024年02月09日
    浏览(37)
  • Jetpack Compose -> 声明式UI & Modifier

    本章主要介绍下 Compose 的声明式 UI 以及初级写法; 传统UI 传统 UI 方式来声明UI 是通过 xml 来进行显示的,显示文字的方式是使用 TextView,它内部显示文字的方式有两种,一种是在 xml 中直接设置,通过下面这种方式设置 这种方式是通过初始值在 xml 中进行预设置的; 还有一

    2024年02月02日
    浏览(53)
  • Jetpack Compose 不止是一个UI框架~

    Jetpack Compose是用于构建原生Android UI的现代工具包。 Jetpack Compose使用更少的代码,强大的工具和直观的Kotlin API,简化并加速了Android上的UI开发。这是Android Developers 官网对它的描述。 本文不是教你Jetpack Compose 的一些基本使用方法,而是为啥我们需要Jetpack Compose 的一些简洁,让

    2024年02月03日
    浏览(53)
  • element ui中父子组件共用一个el-dialog弹窗,切换组件页面弹窗进行关闭

    在Element UI中,如果多个父子组件共用一个el-dialog弹窗,并且需要在切换组件页面时关闭弹窗,你可以考虑以下方法来实现: 在Vuex中创建一个状态来管理弹窗的显示状态(例如,showDialog)。 在父子组件中都可以访问这个状态,以便共享。 当需要打开或关闭弹窗时,分发对应

    2024年02月03日
    浏览(64)
  • 一文带你了解 Jetpack Compose UI 框架

    对于类似 Button 函数的这种,提供了 onClick 函数式接口供外部设置点击监听; 对于类似 Text 函数这种,没有提供显式接口设置的,通过 Modifier 类设置点击监听; Button 函数设置点击事件 @Composable fun TextButton() { Button( onClick = { Log.d(“Andoter”, this.javaClass.name) Toast.makeText(this@Mai

    2024年04月11日
    浏览(61)
  • Android全新UI框架之Jetpack Compose入门基础

    Jetpack Compose是什么 如果有跨端开发经验的同学,理解和学习compose可能没有那么大的压力。简单地说,compose可以让Android的原生开发也可以使用类似rn的jsx的语法来开发 UI界面 。以往,我们开发Android原生页面的时候,通常是在xml中画相关的UI控件,然后在activity中通过findViewB

    2024年02月21日
    浏览(45)
  • Android笔记(六):JetPack Compose常见的UI组件

    Text显示的文本来源可以引用res-values-strings.xml中的资源,如第一个显示文本所示。 点击按钮前: 点击按钮后: 点击第一个圆角按钮不放时,显示为按钮:true Button有两方面需要注意: (1) Buttton有一个参数interactionSource,用来监听组件状态的事件源,通过它获取组件的状态来

    2024年02月04日
    浏览(55)
  • 当element ui el-dialog弹窗有缓存,每次打开弹窗的时候会出问题的解决方法

    解决方法: 如下是解决方案。用el-dialog 里面有一个 destroy-on-close (关闭时销毁 Dialog 中的元素)这个完全没用。其实很简单。只需要在 el-dialog 外层加一层div 然后在 div 上写上 v-if=\\\"dialogVisible\\\"就行了。 理解: 也就是说,当显示参数 dialogVisible = true 时,先创建 el-dialog 组件,

    2024年02月04日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包