当前位置: 首页 > news >正文

Compose - 基本使用

一、概念

1.1 Compose优势

  • 由一个个可以组合的Composable函数拼成界面,方便维护和复用。
  • 布局模型不允许多次测量,提升了性能。
  • Compose可以和View互操作(相互包含对方)。

1.2 声明式UI

APP展示的数据绝大多数不是静态数据而是会实时更新,传统的命令式UI写法更新界面繁琐且容易同步错误。Compose会对界面用到的数据自动进行订阅(属性委托),当数据变化时界面会自动更新(同为数据和界面关联,databinding只能更新组件的值,Compose可以控制组件切换显示)。

 

声明式UI只需要把界面写出来,不需要再手动写代码去刷新界面。重新生成整个屏幕界面成本高昂,Compose生成界面后,数据变动只执行必要的重组(局部刷新)。
命令式UIxml写的界面,当数据变了就需要Java/Kotlin手动(命令指挥)刷新,即 findViewById( ) 遍历树拿到控件,再 setText( ) 设置数据改变节点。

二、使用

2.1 添加依赖

查看官方最新版本

兼容性对应关系

        BoM物料清单:随着依赖的库越来越多,为了保证不同库不同版本之间能正常配合,引入依赖时具体的库不指定版本,而是由BoM管理。

        最低版本:Kotlin ≥ 1.5.10、Android ≥ 5.0(API21)、AndroidStudio ≥ Arctic Fox 2020.3.1。

android {buildFeatures {compose true    //启用Compose功能}composeOptions {//见上方链接,此处定义的Kotlin编译器扩展版本需要对应兼容的Kotlin版本kotlinCompilerExtensionVersion = "1.4.2"}
}
dependencies {//Composedef composeBom = platform('androidx.compose:compose-bom:2023.01.00')implementation composeBomandroidTestImplementation composeBom//主题implementation 'androidx.compose.material3:material3'//预览implementation 'androidx.compose.ui:ui-tooling-preview'debugImplementation 'androidx.compose.ui:ui-tooling'//UI测试androidTestImplementation 'androidx.compose.ui:ui-test-junit4'debugImplementation 'androidx.compose.ui:ui-test-manifest'//可选搭配implementation 'androidx.activity:activity-compose:1.7.0'   //Activityimplementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'   //ViewModelimplementation 'androidx.compose.runtime:runtime-livedata'  //LiveDataimplementation 'androidx.constraintlayout:constraintlayout-compose:1.0.1'   //ConstraintLayoutimplementation 'io.coil-kt:coil-compose:2.3.0' //Coilimplementation 'androidx.navigation:navigation-compose:2.5.3'   //Navigation//    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"  //AppCompatTheme
}

 2.2 Activity调用

需要继承的是ComponentActivity,使用 setContent { } 替换 setContentView( )。

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {    // 设置显示内容,用来替换setContentViewShow("Hello World!")}}
}

三、预览效果 @Preview

使用该注解的组合函数可以在AndroidStudio右上角直接预览效果和点击交互,也能直接部署该预览在真机或模拟器上查看效果和点击交互。AS按出prev能快速打出模板代码。

  •  只能修饰无参可组合函数:可以用无参函数包裹有参函数传个值给它来预览。 
neme设置的该名称会在布局预览中显示。
showBackground预览默认是不显示背景色的,设为true才显示。
backgroundColor设置背景颜色。
showDecoration是否显示Statusbar和Toolbar,true为显示。
group为该Preview设置group名字,可以在UI中以group为单位显示。
fontScale可以在预览中对字体放大,范围是从0.01。
showSystemUi设为 true 显示系统界面(状态栏,屏幕按键)。

widthDp

heightDp

预览区域的大小(单位为dp),和 showSystemUI 互斥。
device预览机型(Devices.DESKTOP、Devices.PIXEL_4、Devices.NEXUS_6)。
apiLevel预览不同版本的效果
@Preview
@Composable
fun WrapperShow() {Show("Word")    //包裹一层再传个值
}@Composable
fun Show(str: String) {Text(text = "Hello ${str}!")
}

3.1 对屏幕级组合函数使用预览失败

原因:系统无法正确实例化 ViewModel 因为它依赖于运行中的 Android 系统,而预览系统只有UI相关代码。

解决:抽离出一个只依赖于状态类的组合函数。

@Composable
fun DemoScreen(viewModel: DemoViewModel = viewModel(),
){DemoContent(viewModel.demoState)
}@Composable
private fun DemoContent(demoState:DemoState
){/* ... */
}@Composable
@Preview
private fun PreviewDemoContent(){DemoContent(remember{DemoState()})
}

3.2 引用了Android运行时才能获取的类预览失败

原因:像 Application 类在预览系统中是不存在的。

解决:通过 LocalInspectionMode.current 来判断当前是否运行于预览系统中,true就使用固定字符串。

@Composable
fun MyTest(){Text(text=if(LocalInspectionMode.current) "预览中" else MyClass.getDesc())
}

相关文章:

Compose - 基本使用

一、概念 1.1 Compose优势 由一个个可以组合的Composable函数拼成界面,方便维护和复用。布局模型不允许多次测量,提升了性能。Compose可以和View互操作(相互包含对方)。 1.2 声明式UI APP展示的数据绝大多数不是静态数据而是会…...

Unity3D Pico VR 手势识别

本文章使用的 Unity3D版本: 2021.3.6 , Pico SDK 230 ,Pico OS v.5.7.1 硬件Pico 4 Pico SDK可以去Pico官网下载SDK 导入SDK 第一步:创建Unity3D项目 第二步:导入 PICO Unity Integration SDK 选择 Windows > Package Manager。 在 Packag…...

【docker】运行registry

registry简介 Docker registry是docker镜像仓库的服务,用于存储和分发docker镜像。 Docker registry主要特点和功能: 存储docker镜像:提供持久化存储docker镜像的功能,存储镜像的各个layer。 分发镜像:拉取和推送镜像的去中心化存储和分发服务。 支持版本管理:给镜像打标签…...

java八股文面试[Spring]——如何实现一个IOC容器

什么是IOC容器 IOC不是一种技术,只是一种思想,一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合,更优良的程序。传统应用程序都是由我们在类内部主动创建依赖对象,从而导致类与类之间高耦合,难于…...

Redis 列表 | Navicat

在最近的博客 文章 中,我们已经了解了 Redis 的六种数据类型。其中,Redis 列表(List)包含一组字符串,他们按照被添加的顺序进行排序。本文将就列表数据类型进行展开介绍,并且重点介绍一些主要的命令来管理它…...

【校招VIP】测试专业课之TCP/IP模型

考点介绍: 大厂测试校招面试里经常会出现TCP/IP模型的考察,TCP/IP协议是网络基础知识,但是在校招面试中很多同学在基础回答中不到位,或者倒在引申问题里,就丢分了。 『测试专业课之TCP/IP模型』相关题目及解析内容可点…...

leetcode76. 最小覆盖子串(滑动窗口-java)

滑动窗口 最小覆盖子串滑动窗口代码 上期经典 最小覆盖子串 难度 - 困难 原题链接 - 最小覆盖字串 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 “” 。 注意: 对于 t…...

后端项目开发:整合全局异常处理

新建exception目录,用来进行自定义的全局异常处理。 (1)新建自定义的GlobalException基 类继承RuntimeException类,我们自定义的异常类全部需要继承GlobalException基类进行处理。 这里我们直接利用之前定义的错误码接口类。 /…...

Linux socket网络编程概述 和 相关API讲解

socket网络编程的步骤 大体上,连接的建立过程就是:服务器在确定协议类型后,向外广播IP地址和端口号,并监听等待,直到客户端获取了IP地址和端口号并成功连接: 使用socket来进行tcp协议的网络编程的大体步骤…...

uni-app封装省市区下拉组件(后台获取数据)

一.后台数据格式 PROCINCE:[{itemName:,itemValue:}] CITY:[{itemName:,itemValue}] AREA:[{itemName:,itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码 <template><picker change"bindPickerChange" columnchange"…...

laravel中Mail发送邮件失败,但是没有错误信息,该如何调试?

在Laravel中&#xff0c;当使用Mail类发送邮件失败但没有错误信息显示时&#xff0c;可以按照以下步骤进行调试&#xff1a; 检查日志文件&#xff1a; Laravel会记录各种应用程序活动和错误信息。查看应用程序的日志文件&#xff0c;通常位于storage/logs目录下&#xff0c;寻…...

软考高级系统架构设计师系列论文八十五:论软件产品线技术

软考高级系统架构设计师系列论文八十五:论软件产品线技术 一、摘要二、正文三、总结一、摘要 根据“十五”国防科技重点实验室—“机载XXPD火控雷达性能开发与评估实验室”的建设需求。我所在的中国x集团公司x所电子对抗研究部组织了用于该实验室目布式联网试验,主要任务是试…...

More Effective C++学习笔记(4)

目录 条款16&#xff1a;谨记 80 - 20 法则条款17&#xff1a;考虑使用lazy evaluation&#xff08;缓式评估&#xff09;条款18&#xff1a;分期摊还预期的计算成本条款19&#xff1a;了解临时对象来源条款20&#xff1a;协助完成 “ 返回值优化 ”条款21&#xff1a;利用重载…...

概率密度函数 累积分布函数

概率密度函数&#xff1a;是指想要求得面积的图形表达式&#xff0c;注意只是表达式&#xff0c;要乘上区间才是概率&#xff0c;所以概率密度并不是概率&#xff0c;而是概率的分布程度。 为什么要引入概率密度&#xff0c;可能是因为连续变量&#xff0c;无法求出某个变量的…...

基于OpenCV实战(基础知识二)

目录 简介 1.ROI区域 2.边界填充 3.数值计算 4.图像融合 简介 OpenCV是一个流行的开源计算机视觉库&#xff0c;由英特尔公司发起发展。它提供了超过2500个优化算法和许多工具包&#xff0c;可用于灰度、彩色、深度、基于特征和运动跟踪等的图像处理和计算机视觉应用。Ope…...

PhantomJS+java 后端生成echart图表的图片

PhantomJSjava 后端生成echart图表的图片 前言源码效果实现echarts-convertPhantomJS实现echarts截图得到图片java延时读取base64数据 参考 前言 该项目仅用作个人学习使用 源码 地址 docker镜像&#xff1a; registry.cn-chengdu.aliyuncs.com/qinjie/java-phantomjs:1.0 …...

vue3 基础知识 ( webpack 基础知识)05

你好 文章目录 一、组件二、如何支持SFC三、webpack 打包工具四、webpack 依赖图五、webpack 代码分包 一、组件 使用组件中我们可以获得非常多的特性&#xff1a; 代码的高亮&#xff1b;ES6、CommonJS的模块化能力&#xff1b;组件作用域的CSS&#xff1b;可以使用预处理器来…...

1.4亿X区智慧城市数字平台及城市大脑(运营中心)建设项目WORD

导读&#xff1a;原文《1.4亿X区智慧城市数字平台及城市大脑&#xff08;运营中心&#xff09;建设项目WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 部分内…...

wps 画项目进度甘特图

效果如上 步骤一&#xff1a; 创建excel 表格 步骤二&#xff1a; 选中开始时间和结束时间两列数据&#xff0c;右键设置单元格格式 步骤三&#xff1a; 选择数值&#xff0c;点击确定&#xff0c;将日期转成数值。 步骤四&#xff1a;插入图表 选中任务&#xff0c;开始时间…...

【⑭MySQL | 数据类型(二)】字符串 | 二进制类型

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL字符串 | 二进制类型类型的分享✨ 目录 前言5 字符串类型6 二进制类型总结 5 字符串类型 字符串类型用来存储字符串数据&#xff0c;还可以存储图片和声音的二进制数据。字符串可以区分或者不区分大小写的串比…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...