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

news2025/2/28 21:33:45

一、文本组件

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 = !clickState
            clickIcon =  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.Green
       Row(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.On
        else if (!triState1 && !triState2) ToggleableState.Off
        else ToggleableState.Indeterminate
    }
       //三相状态复选框
       Column(modifier = Modifier.fillMaxWidth()){
           Row(verticalAlignment = Alignment.CenterVertically){
               TriStateCheckbox(state = triState ,
                   onClick = {
                       val s = triState!=ToggleableState.On
                       onStateChange1(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.coloradmin.cn/o/1087145.html

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

相关文章

【Overload游戏引擎细节分析】从视图投影矩阵提取视锥体及overload对视锥体的封装

【Overload游戏引擎细节分析】从视图投影矩阵提取视锥体及overload对视锥体的封装

overoad代码中包含一段有意思的代码，可以从视图投影矩阵逆推出摄像机的视锥体，本文来分析一下原理 一、平面的方程 视锥体是用平面来表示的，所以先看看平面的数学表达。 平面方程可以由其法线N（A, B, C）和一个点Q(x0,…
阅读更多...
SQL开发笔记之专栏介绍

SQL开发笔记之专栏介绍

Sql是用于访问和处理数据库的标准计算机语言，使用SQL访问和处理数据系统中的数据，这类数据库包括：Mysql、PostgresSql、Oracle、Sybase、DB2等等，数据库无非围绕着“增删改查”的核心业务进行开发。并且目前绝大多数的后端程序开发…
阅读更多...
ElasticSearch-Head 数据浏览406问题解决

ElasticSearch-Head 数据浏览406问题解决

解决方法： 1、打开Docker DeskTop的Containers，找到es-head容器 2、选择Exec Tab选项 3、编辑vendor.js文件 vim _site/vendor.js 4、显示行号 :set nu 5、修改配置 # 修改文件第6886、7574行 将"application/x-www-from-urlencodes"修改…
阅读更多...
经纬恒润数字钥匙，让出行更简单

经纬恒润数字钥匙，让出行更简单

汽车智能进化的同时，汽车与智能手机之间的联系也越来越紧密。新兴的汽车数字钥匙，可以将传统实体钥匙“装入”智能手机，帮助用户摆脱忘带钥匙的烦恼，让出行变得更简单。汽车数字钥匙的实现主要是基于BLE（蓝牙&#xff…
阅读更多...
DevEco Hvigor高效编译，构建过程新秘籍

DevEco Hvigor高效编译，构建过程新秘籍

作者：Lewei，华为终端BG编译构建技术专家 DevEco Hvigor是使用TypeScript语言开发的全新轻量化的任务调度工具，针对HarmonyOS应用提供了一系列编译构建任务，支持将HarmonyOS应用编译构建出对应的产物包。作为一款HarmonyOS应用编译…
阅读更多...
VTK编译解决CMake的“could not find any instance of Visual Studio”的问题

VTK编译解决CMake的“could not find any instance of Visual Studio”的问题

1、在配置VTK源码编译的过程中，遇到报错 “CMake的“could not find any instance of Visual Studio””,cmake在编程找不到vs2017路径或者配置不全。 解决方案： 安装“Visual Studio Installer”； 1.检查是否安装 “使用C的桌面开发” 2.检…
阅读更多...
海思平台SS528V100编译 linux kernel tun.c eth_get_headlen 编译 出错的问题

海思平台SS528V100编译 linux kernel tun.c eth_get_headlen 编译 出错的问题

osdrv目录下 make kernel 会去opensource目录下解压linux内核压缩包 同时打上很多补丁 如上图 查看Makefile 如下 有打补丁的命令 然后 然后我们的应用程序用到一个特性 需要打开tun/tab这两个属性 打开之后编译内核出错 查到最后发现 没打补丁之前的文件 没问题 …
阅读更多...
理解LoadRunner，基于此工具进行后端性能测试的详细过程（上）

理解LoadRunner，基于此工具进行后端性能测试的详细过程（上）

1、LoadRunner 的基本原理 后端性能测试工具通过虚拟用户脚本生成器生成基于协议的虚拟用户脚本，然后根据性能测试场景设计的要求，通过压力控制器控制协调各个压力产生器以并发的方式执行虚拟用户脚本，并且在测试执行过程中，通过…
阅读更多...
微信怎么删除好友？非常简单，2个方法！

微信怎么删除好友？非常简单，2个方法！

随着生活和工作的节奏加快，这也导致我们微信里的联系人变得越来越多。有时候，我们可能只是需要给对方转钱、发送照片或者是一些其他理由。 而这部分“好友”可能除了这次交流后再也没有别的联系了，那么这时候大家可能会想把他们删除。那么微…
阅读更多...
NB6L295M STM32 GD32 IO模拟驱动设计

NB6L295M STM32 GD32 IO模拟驱动设计

本采用工程及相关参考文档，下载链接如下： NB6L295MSTM32GD32IO模拟驱动设计，内含有软件工程代码，实际项目中使用，有参考原理图和实际使用说明资源-CSDN文库 硬件设计 MCU采用GD32,GD32基本上和STM32一样,针对NBL295M…
阅读更多...
【基础篇】七、Flink核心概念

【基础篇】七、Flink核心概念

文章目录 1、并行度2、并行度的设置3、算子链4、禁用算子链5、任务槽6、任务槽和并行度的关系 1、并行度 要处理的数据量很多时，可以把一个算子的操作（比如前面demo里的flatMap、sum），"复制"多份到多个节点&#xff0c…
阅读更多...
NovelAi本地部署版详细教程

NovelAi本地部署版详细教程

这几天NovelAI模型泄露了。那就凑巧了，就以这个模型为例。完整的介绍一下stable-diffusion-webui本地安装方法几乎是从零开始说起（除了不教操作系统安装）。WebUI就是stable-diffusion的可视化版本！ 本地安装的好处是： …
阅读更多...
IDEA实现远程Debug调试

IDEA实现远程Debug调试

一、 前提   需要准备JDK1.8环境，安装IDEA(版本不限) 二、 IDEA中如何实现远程Debug模式 (1)、创建demo项目 1.File一>New一>project… 2.Maven Archetype一>填写Name一>选择jdk1.8一>选择Web一>创建 (2)、配置Idea 找到Remote Jvm Debug java…
阅读更多...
A Better Finder Rename 12 for Mac——让重命名变得更简单

A Better Finder Rename 12 for Mac——让重命名变得更简单

A Better Finder Rename 12 for Mac是一款专业的批量重命名工具，为您提供了快速、简单、可靠的重命名解决方案。无论您是否需要批量重命名文件、图像、音频或视频文件等，A Better Finder Rename 12 for Mac可以帮助您快速完成任务，节省宝贵的…
阅读更多...
计算机网络-计算机网络体系结构-数据链路层

计算机网络-计算机网络体系结构-数据链路层

目录 *一、组帧 1.1字符计数法 1.2字符填充法 1.3零比特填充法 1.4违规编码 *二、差错控制 2.1检错编码 2.2.1奇偶校验码 2.2.2 CRC循环冗余码 2.2纠错编码-海明码 *三、流量控制和可靠传输机制 流量控制 停止-等待协议 ​编辑 后退n帧协议的滑动窗口(GBN) 选择…
阅读更多...
效率出图！9款最好用的矢量图软件推荐

效率出图！9款最好用的矢量图软件推荐

设计可以让我们将想法和想象力变成可视化的现实，数字时代的设计，对于细节的要求则更高，矢量绘图必不可少。和我们常见的png、jpeg等格式的图片不同，矢量图格式一般有SVG、EPS、AI等，它是通过数学方程来绘制的&#xff…
阅读更多...
解决MySQL错误-this is incompatible with sql_mode=only_full_group_by

解决MySQL错误-this is incompatible with sql_mode=only_full_group_by

报错 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘数据库名.表名.字段名’ which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_modeonly_full_group_by 原因 MySQL错误-t…
阅读更多...
Spring Boot中的 @Aspect 注解是什么，如何使用

Spring Boot中的 @Aspect 注解是什么，如何使用

Spring Boot中的 Aspect 注解是什么，如何使用 在Spring Boot应用程序中，面向切面编程（AOP）是一种重要的编程范例，它可以用来处理横切关注点，例如日志记录、事务管理、性能监测等。Aspect 注解是Spring Fra…
阅读更多...
uni-app开发微信小程序的报错[渲染层错误]排查及解决

uni-app开发微信小程序的报错[渲染层错误]排查及解决

一、报错信息 [渲染层错误] Framework nner error (expect FLOW INITIALCREATION end but get FLOW CREATE-NODE) 二、原因分析及解决方案 第一种 原因：基础库版本的原因导致的。 解决： 1.修改调试基础库版本 2.详情—>本地设置—>调试基础库…
阅读更多...
2023转行要趁早！盘点网络安全的岗位汇总

2023转行要趁早！盘点网络安全的岗位汇总

前段时间，知名机构麦可思研究院发布了《2022年中国本科生就业报告》，其中详细列出近五年的本科绿牌专业，信息安全位列第一。 对于网络安全的发展与就业前景，知了姐说过很多，作为当下应届生收入较高的专业之一&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023