iis服务器助手广告
返回顶部
首页 > 资讯 > 移动开发 >JetpackCompose实现对话框和进度条实例解析
  • 377
分享到

JetpackCompose实现对话框和进度条实例解析

JetpackCompose实现对话框JetpackCompose实现进度条 2023-05-16 12:05:31 377人浏览 八月长安
摘要

目录概述实例解析1.对话框Dialog2.进度条总结概述 对话框和进度条其实并无多大联系,放在一起写是因为两者的内容都不多,所以凑到一起,对话框是我们平时开发使用得比较多的组件,像隐

概述

对话框和进度条其实并无多大联系,放在一起写是因为两者的内容都不多,所以凑到一起,对话框是我们平时开发使用得比较多的组件,像隐私授权,用户点击删除时给用户提示这是一个危险操作等,进度条的使用频率也很高,比如下载文件,上传文件,处理任务时都可以使用进度条,让用户知道系统还在运行,没有死机。本文将介绍在Compose中如何使用对话框和进度条

实例解析

1.对话框Dialog

首先我们可以先看下Compose中对话框的参数列表

@Composable
fun Dialog(
    onDismissRequest: () -> Unit, // 当我们打算关闭对话框时会执行
    properties: DialogProperties = DialogProperties(), // 对话框的属性,用于自定义
    content: @Composable () -> Unit // 对话框的内容
)

从对话框组件的参数列表来看,参数不多,只有三个,但是实现的内容却不输传统的view,其中content参数允许我们通过传入自己的Composable组件来描述对话框的界面,例如,我们想实现对话框Dialog的宽度不受限制,达到全屏的效果,代码如下:

 @OptIn(ExperimentalComposeUiapi::class)
    @Composable
    fun FullDialog() {
        Dialog(
            onDismissRequest = {  },
            properties = DialogProperties(usePlatfORMDefaultWidth = false)
        ) {
            Surface(modifier = Modifier.fillMaxSize(), color = Color.Gray) {
                Text(text = "Hello World")
            }
        }
    }

properties 参数用于定制一些对话框特有的行为:

@Immutable
class DialogProperties @ExperimentalComposeUiApi constructor(
    val dismissOnBackPress: Boolean = true, // 是否可以在按下系统返回键的时候取消对话框
    val dismissOnClickOutside: Boolean = true,// 是否可以点击对话框以外的区域取消对话框
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    @Suppress("EXPERIMENTAL_ANNOTATioN_ON_WRONG_TARGET")
    @get:ExperimentalComposeUiApi
    val usePlatformDefaultWidth: Boolean = true // 对话框的内容是否需要限制在平台默认的范围之内
) 

需要注意的是,Compose的对话框不像传统视图的对话框那样,可以通过show(),dismiss()等命令的方式显示或者隐藏,它像不同的Compose组件一样,显示与否需要看是否在重组中被执行,也就是说在Comopose中对话框的显示或者隐藏要看状态的控制,Dialog和普通组件的不同之处在于对话框底层需要依赖独立的Window显示

下面我们看下如何使用状态控制对话框的显示和隐藏:

 @Composable
    fun DialogDemo(){
        val openDialog = remember {
            mutableStateOf(true)
        }
        val dialogWidth = 200.dp
        val dialogHeight = 50.dp
        if(openDialog.value){
            Dialog(onDismissRequest = { openDialog.value = false }) {
                Box(modifier = Modifier
                    .size(dialogWidth, dialogHeight)
                    .background(Color.White)){
                    Text(text = "Hello World")
                }
            }
        }
    }

运行结果如下:

在Dialog组件显示的过程中,当点击对话框以外的区域时,onDismissRequest会触发执行,修改openDialog状态为false,从而触发DialogDemo重组,此时判断openDialog为false,Dialog无法被执行,对话框消失。

我们接下来再看下一个警告对话框应该怎么做,警告对话框(Alertdialog)组件是比Dialog组件更高级别的封装,遵循Material Design设计标准。它帮我们定好了标题,内容文本以及按钮的位置,我们只需要提供相应的内容即可,下面演示如何使用AlertDialog

    @Composable
    fun AlertDialogDemo()
    {
        val openDialog = remember {
            mutableStateOf(true)
        }
        if(openDialog.value){
            AlertDialog(onDismissRequest = { openDialog.value = false },
            title = {
                Text(text = "开启位置服务")
            }, text = {
                Text(text = "这将意味着我们会给您提供精确的位置信息")
                },
            confirmButton = {
                TextButton(onClick = { openDialog.value = false}) {
                    Text(text = "同意")
                }
            },
            dismissButton = {
                TextButton(onClick = {  openDialog.value = false}) {
                    Text(text = "取消")
                }
            })
        }
    }

运行结果:

2.进度条

Compose自带了两种material Design进度条,分别是圆形进度条和直线进度条,他们都有两种状态,一种是无限加载的,另一种是根据值来动态显示的,我们就以一个圆形的进度条来演示Compose中进度条的使用吧,代码如下:

  @Composable
    fun ProgressBarDemo()
    {
        var progress by remember {
            mutableStateOf(0.1f)
        }
        val animatedProgress by animateFloatAsState(targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)
        Column {
            CircularProgressIndicator(progress = animatedProgress)
            Spacer(modifier = Modifier.requiredHeight(30.dp))
            OutlinedButton(onClick = { if (progress < 1f) progress += 0.1f}) {
                Text(text = "增加进度")
            }
        }
    }

运行结果如下:

如上面代码所示,当我们点击一次按钮时,进度就会增加10%,当不设置progress时,就是无限加载的进度条,另外,还有一种时直线进度条(LinearProgressIndicator),使用方法和圆形进度条完全一致

总结

到此这篇关于Jetpack Compose实现对话框和进度条实例解析的文章就介绍到这了,更多相关Jetpack Compose对话框和进度条内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JetpackCompose实现对话框和进度条实例解析

本文链接: https://www.lsjlt.com/news/209693.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JetpackCompose实现对话框和进度条实例解析
    目录概述实例解析1.对话框Dialog2.进度条总结概述 对话框和进度条其实并无多大联系,放在一起写是因为两者的内容都不多,所以凑到一起,对话框是我们平时开发使用得比较多的组件,像隐...
    99+
    2023-05-16
    Jetpack Compose实现对话框 Jetpack Compose实现进度条
  • Jetpack Compose怎么实现对话框和进度条
    这篇文章主要介绍“Jetpack Compose怎么实现对话框和进度条”,在日常操作中,相信很多人在Jetpack Compose怎么实现对话框和进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-07-06
  • Android AlertDialog(对话框)实例详解
    目录1.创建AlertDialog1.1 布局文件代码如下:1.2 MainActivity的主要代码如下所示:2.普通提示对话框3.普通列表对话框4.单选对话框4、复选对话框6、自...
    99+
    2024-04-02
  • VB.NET路径选择对话框实现API的实例分析
    这篇文章给大家介绍VB.NET路径选择对话框实现API的实例分析,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。VB.NET 这门语言被我们大部分人所熟悉。但是今天在这里还是要介绍一下首先接受一下VB.NET,更主要的是...
    99+
    2023-06-17
  • CSS怎么实现进度条和订单进度条
    这篇文章主要讲解了“CSS怎么实现进度条和订单进度条 ”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS怎么实现进度条和订单进度条 ”吧!简单地效果图如下...
    99+
    2024-04-02
  • CSS如何实现进度条和订单进度条
    小编给大家分享一下CSS如何实现进度条和订单进度条,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!简单地效果图如下:CSS实现进度条:html结构:<div&...
    99+
    2023-06-08
  • Qt 进度条的实现示例
    一、前言   有时我们需要在表格(QTableWidget)、树状栏(QTreeWidget)中直观显示任务进度或消耗百分比,达到报表显示的形式,可通过重写QLabel的方式实现。 ...
    99+
    2024-04-02
  • golang程序进度条实现示例详解
    目录引言原理上才艺调用代码QPS表达任务处理速度知识点总结引言 最近在工作中写一个批处理脚本,令人抓狂的是每次都不知道脚本要跑到啥时候结束,于是想到给程序添加个进度条。 逛了一圈,没...
    99+
    2024-04-02
  • Vue 实现接口进度条示例详解
    目录实现思路代码实现参数注入总结前端在向后端请求信息时,常常需要等待一定的时间才能得到返回结果。为了提高用户体验,可以通过实现一个接口进度条函数来增加页面的交互性和视觉效果。 接口...
    99+
    2023-05-17
    Vue 接口进度条 Vue 进度条
  • Linux下模拟实现进度条的示例分析
    这篇文章将为大家详细讲解有关Linux下模拟实现进度条的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Linux下模拟实现进度条 在Linux系统下模拟进度条,首先需要了解一些简单基础知...
    99+
    2023-06-09
  • css横向进度条和竖向进度条如何实现
    这篇文章将为大家详细讲解有关css横向进度条和竖向进度条如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、横向进度条<html><head><title>横向进...
    99+
    2023-06-08
  • WPF实现圆形进度条的示例代码
    WPF 实现圆形进度条 框架使用.NET40;Visual Studio 2019;CircularProgressBar 继承 ProgressBar,在&nb...
    99+
    2023-01-04
    WPF实现圆形进度条 WPF圆形进度条 WPF进度条
  • React和Vue实现文件下载进度条
    目录一、需求场景二、实现原理三、react 实现步骤1. 托管静态资源2. 封装hook3. 使用hook四、vue 实现步骤1. 托管静态资源2. 封装hook3. 使用hook五...
    99+
    2023-05-18
    React下载进度条 Vue下载进度条
  • Qt编写提示进度条的实现示例
    目录一、前言二、实现的功能三、效果图四、头文件代码五、核心代码六、控件介绍一、前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度...
    99+
    2024-04-02
  • C/C++ QT实现自定义对话框的示例代码
    对话框分为多种,常见的有通用对话框,自定义对话框,模态对话框,非模态对话框等,其中通用对话框包括了,QFileDialog文件对话框,QColorDialog颜色对话框,QFontD...
    99+
    2024-04-02
  • 利用Qt实现可扩展对话框的示例代码
    目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 dialog.h头文件4.2 dialog.cpp源文件五、效果演示可扩展对话框通常用于用户对界面有不同要求的场...
    99+
    2024-04-02
  • C语言进度条的实现原理详解
    目录\r和\n行缓冲区进度条\r和\n 在程序里面,\r和\n分别代表什么意思? \r:表示“回车”,即回到当前行的起始位置 \n:表示换行,即列不变,另其一...
    99+
    2024-04-02
  • React和Node.js快速上传进度条功能实现
    目录正文技术栈实现过程1. 前端2. 后端服务(server.js)正文 在现代的Web应用程序中,文件上传是一个很常见的需求。上传进度条是一种用于告知用户上传进度的工具,它可以...
    99+
    2023-03-19
    React Node.js上传进度条 React Node.js
  • Android 自定义弹出菜单和对话框功能实例代码
    Android 开发当中,可能会存在许多自定义布局的需求,比如自定义弹出菜单(popupWindow),以及自定义对话框(Dialog)。话不多说,直接上图片。 先讲第一种,自定义PopUpWindow1.popupWindowp...
    99+
    2023-05-30
    android 弹出菜单 对话框
  • 如何利用ChatGPT和Python实现对话历史分析
    如何利用ChatGPT和Python实现对话历史分析引言:人工智能的发展给自然语言处理带来了重大突破。OpenAI的ChatGPT模型是一种强大的语言生成模型,能够生成连贯、合理的文本回复。本文将介绍如何使用ChatGPT和Python实现...
    99+
    2023-10-25
    ChatGPT Python 对话历史分析
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作