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 年。根据各项报…
阅读更多...
Linux运行环境搭建系列-Kafka安装

Linux运行环境搭建系列-Kafka安装

Kafka安装 ## 官网下载地址:https://kafka.apache.org/downloads，根据需求选择合适的版本 https://downloads.apache.org/kafka/3.5.1/kafka_2.13-3.5.1.tgz ## 解压并删除源文件 tar -zxvf kafka_2.13-3.5.1.tgz && rm -rf kafka_2.13-3.5.1.tgz ## 修改配…
阅读更多...
02Maven核心程序的下载与settings.xml文件的配置,环境变量的配置

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

Maven核心程序的解压与配置 Maven的下载与解压 Maven官网下载安装包 将下载的Maven核心程序压缩包apache-maven-3.8.4-bin.zip解压到一个非中文且没有空格的目录 Maven的核心配置文件 在Maven的解压目录conf中我们需要配置Maven的核心配置文件settings.xml 配置本地仓库位置…
阅读更多...
[python] 利用 Pydoc 快速生成整个 Python 项目的文档

[python] 利用 Pydoc 快速生成整个 Python 项目的文档

如何写注释 class MyClass:"""This is a simple example class.Attributes:param1 (int): The first parameter.param2 (str): The second parameter."""def __init__(self, param1, param2):"""The constructor for MyClass.:p…
阅读更多...
多机器人三角形编队的实现

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

文章目录 前言一、机器人编队前的准备二、配置仿真环境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年中秋福利采购季期间&#…
阅读更多...
Linux运行环境搭建系列-Zookeeper安装

Linux运行环境搭建系列-Zookeeper安装

Zookeeper安装 ## 下载Zookeeper：https://zookeeper.apache.org/releases.html https://dlcdn.apache.org/zookeeper/zookeeper-3.8.3/apache-zookeeper-3.8.3-bin.tar.gz ## 解压 tar -zxvf apache-zookeeper-3.8.3-bin.tar.gz ## 删除原文件，重命名 r…
阅读更多...
Docker运行docker中指定一个jar

Docker运行docker中指定一个jar

目标： 在正在运行的一个docker容器中，容器的名字为 testimg，运行我们容器文件中我们放的一个jar包。例如：xiaobai.jar,并且在群晖的定时任务中，每分钟运行一次。 解决问题方案： 在群晖定时任务中运行指定…
阅读更多...
一文理清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…
阅读更多...
【数据库】SQL 表、索引、视图的创建修改与删除

【数据库】SQL 表、索引、视图的创建修改与删除

SQL 表、索引、视图的创建修改与删除 基本表操作创建表修改表删除表 索引建立索引删除索引 视图视图的创建视图的删除 SQL表操作&#xff0c;又称为SQL数据定义&#xff0c;包含对表、视图、索引的创建和删除。 基本表与视图&#xff1a; 基本表和试图都是表&#xff0c;有所不…
阅读更多...
TiDB部署及常用命令

TiDB部署及常用命令

TiDB是一个分布式数据库系统&#xff0c;具有高可用性、可扩展性和兼容性等特点。下面是一个TiDB的部署方案及常用命令50条。 一、TiDB部署方案 安装TiUP&#xff1a;TiUP是一个TiDB生态系统的集成管理工具&#xff0c;你可以使用它来安装和管理各种TiDB组件。 curl --proto h…
阅读更多...
LiveMedia视频中间件如何与第三方系统实现事件录像关联

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

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

Copyright @ 2022~2023