Android笔记（六）：JetPack Compose常见的UI组件

一、文本组件

1.1Text

Column(modifier = Modifier.fillMaxSize().background(Color.Green).padding(10.dp)){Text(text= stringResource(id = R.string.title_content),modifier= Modifier.fillMaxWidth().border(BorderStroke(1.dp, Color.White)),fontSize = 20.sp,textAlign = TextAlign.Center,maxLines = 5)Text(text= "测试文本2",modifier= Modifier.fillMaxWidth().border(BorderStroke(1.dp, Color.White)),fontSize = 20.sp,textAlign = TextAlign.Center)}

在这里插入图片描述
Text显示的文本来源可以引用res->values->strings.xml中的资源，如第一个显示文本所示。

1.2文本输入框

    var text by remember { mutableStateOf("")}Column(modifier = Modifier.fillMaxSize().background(Color.Green).padding(10.dp)){TextField(value = text,onValueChange = {it:String->text = it},label ={Text("文本输入框")},leadingIcon = {Icon(imageVector = Icons.Default.Email,contentDescription = "账号")},trailingIcon={Icon(imageVector = Icons.Default.Person, contentDescription = "用户名")})OutlinedTextField(value = text,onValueChange ={text = it},label={Text("边框文本输入框")},leadingIcon = {Icon(imageVector = Icons.Filled.Star, contentDescription = "密码")})BasicTextField(value = text,onValueChange = {text = it},decorationBox = {innerTextField ->Row(verticalAlignment = Alignment.CenterVertically){Icon(imageVector = Icons.Default.Search,contentDescription = "搜索")innerTextField()}},modifier = Modifier.padding(horizontal = 5.dp).background(Color.White, CircleShape).height(50.dp).fillMaxWidth())}

在这里插入图片描述

二、按钮组件

  var clickIcon by remember {mutableStateOf(Icons.Filled.ShoppingCart)}val clickInteraction = remember { MutableInteractionSource()}val pressState = clickInteraction.collectIsPressedAsState()Column(modifier = Modifier.fillMaxWidth().padding(10.dp),verticalArrangement = Arrangement.Center){Button(modifier = Modifier.clickable {/*内部已经被占用，会被拦截，因此日志不会显示*/Log.d("TAG","点击按钮")},onClick = {clickState = !clickStateclickIcon =  if(clickState) Icons.Filled.Star else Icons.Filled.ShoppingCart}, interactionSource = clickInteraction, //监听组件状态border = BorderStroke(5.dp,borderColor)){Text("按钮:"+pressState.value)}IconButton(onClick = {}) {Icon(imageVector = clickIcon,contentDescription = "图标按钮")}TextButton(onClick = {}){Text("文本按钮")}}

点击按钮前：
在这里插入图片描述
点击按钮后：
在这里插入图片描述
点击第一个圆角按钮不放时，显示为按钮:true

Button有两方面需要注意：
（1） Buttton有一个参数interactionSource，用来监听组件状态的事件源，通过它获取组件的状态来设置不同的样式。获取的组件的状态可以是：

interactionSource.collectIsPressedAsState()：判断是否按下状态
interactionSource.collectIsFocusedAsState()：判断是否获取焦点的状态
interactionSource.collectIsDraggedAsState()：判断是否拖动

（2） 所有的Composable的组件都具有Modifier.clickable修饰符，用来处理组合组件的事件，如Material Design风格的水波纹等，是通过内部拦截Modifier.clickable来实现。因为Modifier.clickable已经被内部占用，需要额外定义Button的onClick用来处理点击开发者定义事件。

三、图片组件

定义图片可以通过Image和Icon来实现，调用的形式如下述代码：

Column(modifier= Modifier.fillMaxSize().padding(20.dp)){//必须是png,jpg的图片Image(painter = painterResource(id = R.mipmap.laugh),contentDescription = "不支持使用")//Icon默认的背景颜色是黑色Icon(imageVector = Icons.Default.Face,tint = Color.Green,contentDescription = "图标示例1")Icon(painter= painterResource(id = R.mipmap.laugh),contentDescription = "图标示例2",tint = Color.Blue)Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh),contentDescription = "图标示例3",tint=Color.Unspecified)}

在这里插入图片描述

一共定义了四张图，第2张图是调用系统内部的图标。引用图片资源主要有三种形式：

    Icon(imageVector = Icons.Default.Face,contentDescription = "图标示例1")Icon(painter= painterResource(id = R.mipmap.laugh),contentDescription = "图标示例2",tint = Color.Blue)Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh),contentDescription = "图标示例3",tint=Color.Unspecified)

tint设置图标的颜色，如果设置为Color.Unspecified表示不设置，则采用原来的颜色。

四、选择器相关组件

//复选按钮状态var checkedState by remember {mutableStateOf(false)}//复选框Row(verticalAlignment = Alignment.CenterVertically){Checkbox(checked = checkedState ,onCheckedChange ={it:Boolean->checkedState = it},colors = CheckboxDefaults.colors(checkedColor = Color.Green))Text("复选框")}

在这里插入图片描述
在这里插入图片描述

     var selectedState by remember {mutableStateOf(false)}//单选按钮var selectedColor = Color.GreenRow(verticalAlignment = Alignment.CenterVertically){RadioButton(selected = selectedState,onClick = {selectedState = !selectedState},colors = RadioButtonDefaults.colors(selectedColor = selectedColor))Text("单选按钮")}

在这里插入图片描述

    //三相复选按钮状态val (triState1,onStateChange1) = remember { mutableStateOf(false) }val (triState2,onStateChange2) = remember { mutableStateOf(false) }val triState = remember(triState1,triState2){if(triState1 && triState2) ToggleableState.Onelse if (!triState1 && !triState2) ToggleableState.Offelse ToggleableState.Indeterminate}//三相状态复选框Column(modifier = Modifier.fillMaxWidth()){Row(verticalAlignment = Alignment.CenterVertically){TriStateCheckbox(state = triState ,onClick = {val s = triState!=ToggleableState.OnonStateChange1(s)onStateChange2(s)},colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colorScheme.primary))Text("三相状态复选框")}Column(modifier = Modifier.padding(10.dp)){Row(verticalAlignment = Alignment.CenterVertically) {Checkbox(triState1, onStateChange1)Text("选项1")}Row(verticalAlignment = Alignment.CenterVertically){Checkbox(triState2,onStateChange2)Text("选项2")}}}

在这里插入图片描述

      //switch开关状态var openState by remember{ mutableStateOf(false) }//Switch单选开关Row(verticalAlignment = Alignment.CenterVertically){Switch(checked = openState,onCheckedChange = {it:Boolean->openState = it},colors = SwitchDefaults.colors(disabledCheckedTrackColor = Color.DarkGray, checkedTrackColor = Color.Green))Text(if(openState) "打开" else "关闭")}

在这里插入图片描述

     //sliderProgress值：进度条的值var sliderProgress by remember{ mutableStateOf(0f) }//定义Slider组件Column(horizontalAlignment = Alignment.CenterHorizontally){Slider(value = sliderProgress ,onValueChange ={it:Float->sliderProgress = it},colors = SliderDefaults.colors(activeTrackColor = Color.Green))Text(text = "进度：%.1f%%".format(sliderProgress*100))}}

在这里插入图片描述
拖方进度条，则类似如下显示：

在这里插入图片描述

五、定义对话框

    var openState2 by remember { mutableStateOf(true) }Column(modifier = Modifier.fillMaxSize()) {if(openState2){AlertDialog(onDismissRequest = {openState2 = !openState2},title = {Text("警告对话框标题")},text={Text("警告对话框内容")},confirmButton = {TextButton(onClick={openState2 = true}){Text("确定")}},dismissButton = {TextButton(onClick={openState2 = false}){Text("取消")}})}}

在这里插入图片描述

   var openState1 by remember{ mutableStateOf(true) }Column(modifier = Modifier.fillMaxSize()) {if(openState1){Dialog(onDismissRequest = {openState1 = !openState1}){Column(modifier = Modifier.size(200.dp, 80.dp).background(Color.White)){Text("对话框")Button(onClick = {openState1 = !openState1}){Text("关闭对话框")}}}}}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/104599.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

分布式文件服务器——Windows环境MinIO的三种部署模式

分布式文件服务器——Windows环境MinIO的三种部署模式

上节简单聊到MinIO：分布式文件存储服务——初识MinIO-CSDN博客，但没具化，本节开始展开在Windows环境下 MinIO的三种部署模式：单机单节点、单机纠删码、集群模式。 部署的几种模式简要概括 所谓单机单节点模式：即MinI…
阅读更多...
在Windows下自己从源码编译Python3.10.13成安装包

在Windows下自己从源码编译Python3.10.13成安装包

文章目录 （一）Python 3.10 的生命周期（一）下载源码（二）准备环境（三）编译（3.1）解压源码到目录（3.2）下载依赖（PCBuild&#…
阅读更多...
消息称苹果或在明年推出搭载M3芯片的MacBook产品

消息称苹果或在明年推出搭载M3芯片的MacBook产品

近日据 DigiTimes 发布的博文，苹果公司计划在 2024 年推出搭载 M3 芯片的 MacBook 产品。然而，关于这款新产品的发布日期仍存在争议。虽然一些爆料认为苹果可能会在今年发布这款产品，但也有一些爆料认为发布时间会推迟到 2024 年。根据各项报…
阅读更多...
02Maven核心程序的下载与settings.xml文件的配置,环境变量的配置

02Maven核心程序的下载与settings.xml文件的配置,环境变量的配置

Maven核心程序的解压与配置 Maven的下载与解压 Maven官网下载安装包 将下载的Maven核心程序压缩包apache-maven-3.8.4-bin.zip解压到一个非中文且没有空格的目录 Maven的核心配置文件 在Maven的解压目录conf中我们需要配置Maven的核心配置文件settings.xml 配置本地仓库位置…
阅读更多...
多机器人三角形编队的实现

多机器人三角形编队的实现

文章目录 前言一、机器人编队前的准备二、配置仿真环境2.编写机器人编队.cpp文件 三、三角形编队测试 前言 前阵子一直想要实现多机器人编队，找到了很多开源的编队代码，经过好几天的思索，终于实现了在gazebo环境中的TB3三角形机器人编队。 一…
阅读更多...
【数据分享】2022年我国30米分辨率的坡向数据（免费获取）

【数据分享】2022年我国30米分辨率的坡向数据（免费获取）

地形数据，也叫DEM数据，是我们在各项研究中最常使用的数据之一。之前我们分享过2022年哥白尼30米分辨率的DEM高程数据，该数据被公认为是全球最佳的开源DEM数据之一，甚至没有之一（可查看之前的文章获悉详情）&…
阅读更多...
macbook电脑删除app怎么才能彻底清理？

macbook电脑删除app怎么才能彻底清理？

macBook是苹果公司推出的一款笔记本电脑，它的操作系统是macOS。在macBook上安装的app可能会占用大量的存储空间，因此，当我们不再需要某个app时，需要将其彻底删除。macbook删除app，怎么才能彻底呢？本文将给大…
阅读更多...
京东数据平台：2023年京东营养保健品市场销售数据分析

京东数据平台：2023年京东营养保健品市场销售数据分析

随着十一长假结束，市场端也开始了一系列的消费数据回顾和复盘。从现有数据表现来看，营养保健品市场的增长备受关注。 近日，京东消费及产业发展研究院与《经济日报》联合整合了相关数据。数据显示，2023年中秋福利采购季期间&#…
阅读更多...
一文理清JVM结构

一文理清JVM结构

JVM结构介绍 JVM一共分为三个组成部分: 1 类加载子系统 主要是将class文件加载到内存中的一个系统，其核心组件是类加载器 2 运行时数据区子系统 1 JVM私有部分 1 虚拟机栈 描述的是Java方法执行的内存模型：每个方法在执行的同时都会创建一个栈帧&…
阅读更多...
微信小程序/vue3/uview-plus form兜底校验

微信小程序/vue3/uview-plus form兜底校验

效果图 代码 <template><u-form :model"form" ref"formRole" :rules"rules"><u-form-item prop"nickname"><u-input v-model"form.nickname" placeholder"姓名" border"none" /&…
阅读更多...
京东数据平台：2023年服饰行业销售数据分析

京东数据平台：2023年服饰行业销售数据分析

最近看到有些消费机构分析&#xff0c;不少知名的运动品牌都把“主战场”放到了冲锋衣&#xff0c;那么羽绒服市场就比较危险了。但其实羽绒服市场也有机会点可寻。 先来说冲锋衣。的确&#xff0c;从今年的销售数据以及增长情况&#xff0c;冲锋衣的确会是今年冬天的大热门品…
阅读更多...
大数据flink篇之三-flink运行环境安装（一）单机Standalone安装

大数据flink篇之三-flink运行环境安装（一）单机Standalone安装

一、安装包下载地址 https://archive.apache.org/dist/flink/flink-1.15.0/ 二、安装配置流程 前提基础&#xff1a;Centos环境&#xff08;建议7以上&#xff09; 安装命令&#xff1a; 解压&#xff1a;tar -zxvf flink-xxxx.tar.gz 修改配置conf/flink-conf.yaml&#xff1…
阅读更多...
ubuntu中查看进程并结束进程以查看资源占用命令

ubuntu中查看进程并结束进程以查看资源占用命令

ps命令&#xff1a;可以列出正在运行的进程。ps -e ps -aux 查看所有进程&#xff0c;每行一个程序&#xff08;常用&#xff09;ps -A 查看当前系统所有的进程。&#xff08;常用&#xff09;ps -A | grep chrome 命令去搜索某个指定进程。&#xff08;常用&#xff09;ps -A…
阅读更多...
LiveMedia视频中间件如何与第三方系统实现事件录像关联

LiveMedia视频中间件如何与第三方系统实现事件录像关联

一、平台简介 LiveMedia视频中间件是支持部署到本地服务器或者云服务器的纯软件服务&#xff0c;也提供服务器、GPU一体机全包服务&#xff0c;提供视频设备管理、无插件、跨平台的实时视频、历史回放、语音对讲、设备控制等基础功能&#xff0c;支持视频协议有海康、大华私有协…
阅读更多...
Tomcat的安装和配置

Tomcat的安装和配置

一.Tomcat下载&#xff1a;去Tomcat官网地址 在左侧Download中选择你需要下载的版本&#xff0c;这里我选择Tomcat9 根据电脑系统是32位还是64位选择&#xff0c;这里我选择64-bit Windows zip&#xff0c;点击即可下载 下载后直接解压&#xff0c;这里我解压在E盘的computer…
阅读更多...
Python 简介

Python 简介

一、Python 简介 Python 是著名的“龟叔” Guido van Rossum 在 1989 年圣诞节期间&#xff0c;为了打发无聊的圣诞节而编写的一个编程语言。牛人就是牛人&#xff0c;为了打发无聊时间竟然写了一个这么牛皮的编程语言。 现在&#xff0c;全世界差不多有 600 多种编程语言&am…
阅读更多...
性能测试之性能测试指标详解

性能测试之性能测试指标详解

前言 刚开始&#xff0c;以为做性能测试&#xff0c;就是做些脚本、参数化、关联&#xff0c;压起来之后&#xff0c;再扔出一个结果。 但实际上不止这些内容&#xff0c;还要加上性能分析&#xff0c;关注调优之后响应时间有多大的提升&#xff0c;TPS 有多大的提高&#xf…
阅读更多...
K8S云计算系列-(3)

K8S云计算系列-(3)

K8S Kubeadm案例实战 Kubeadm 是一个K8S部署工具&#xff0c;它提供了kubeadm init 以及 kubeadm join 这两个命令来快速创建kubernetes集群。 Kubeadm 通过执行必要的操作来启动和运行一个最小可用的集群。它故意被设计为只关心启动集群&#xff0c;而不是之前的节点准备工作…
阅读更多...
GPT-4V的图片识别和分析能力

GPT-4V的图片识别和分析能力

GPT-4V是OpenAI开发的大型语言模型&#xff0c;是GPT-4的升级版本。GPT-4V在以下几个方面进行了改进&#xff1a; 模型规模更大&#xff1a;GPT-4V的参数量达到了1.37T&#xff0c;是GPT-4的10倍。训练数据更丰富&#xff1a;GPT-4V的训练数据包括了1.56T的文本和代码数据。算…
阅读更多...
【沧元图】玉阳宫主是正是邪，和面具人有勾结吗？现在已有答案了

【沧元图】玉阳宫主是正是邪，和面具人有勾结吗？现在已有答案了

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析沧元图。 沧元图这部动漫中&#xff0c;有一个很特殊的人物&#xff0c;也是一个让人看不透的人物&#xff0c;因为很多人都不知道这个人是正还是邪&#xff0c;这个人就是玉阳宫主。 因为这个人明面上是掌管东宁府维护东…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023