Compose学习 - remember、mutableStateOf的使用

一、需求

在显示界面中,数据变动,界面刷新是非常常见的操作,所以使用compose该如何实现呢?

二、remember、mutableStateOf的使用

我们可以借助标题的两个概念 remember、mutableStateOf来完成。这里先不写定义,定义看完也不是很明白,从例子中去学习,先看段code:

@Composable
fun AutoIncrementTest1() {var count = 0Row(modifier = Modifier.padding(20.dp),verticalAlignment = Alignment.CenterVertically) {Text(text = "$count",Modifier.padding(horizontal = 15.dp))Button(onClick = { count++ }) {Text(text = "auto-increment ")}}
}

这段代码是显示一个Text和一个Button,点击Button后,count变量自增,然后在Text中显示出来。

但是实际测试的时候,点击按钮Text显示数字是不会变化的,原因是 Compose 并未跟踪此变量更改。也就是说,这个变量不会触发界面的刷新。

为了解决上面的问题就可以使用 mutableStateOf 函数,来看下修改后的代码:

StateMutableState 是两个接口,它们具有特定的值,每当该值发生变化时,它们就会触发界面更新(重组)。

setContent {ComposeTestTheme {Surface(color = MaterialTheme.colors.background,) {AutoIncrementTest2()}}
}@Composable
fun AutoIncrementTest2() {var count = mutableStateOf(0)Row(modifier = Modifier.padding(20.dp),verticalAlignment = Alignment.CenterVertically) {Text(text = "${count.value}",Modifier.padding(horizontal = 15.dp))//用到的时候需要.value获取Button(onClick = { count.value++ }) {Text(text = "auto-increment ")}}
}

我们把变量改成使用mutableStateOf函数,但是我点击按钮,Text的显示依然不会改变,为啥呢?

原因是在count改动的时候,Surface接收的这个Composable函数就会重绘,即将这个AutoIncrementTest2函数从头调用一遍,每次调用时候,走到第一行语句,count就又赋值为0,所以看起来就是没有改变,依然是0。

在这种情况下,假如还想记住上一次变量值,就要用到remember,来看下修改后的代码:

setContent {ComposeTestTheme {Surface(color = MaterialTheme.colors.background,) {AutoIncrementTest2()}}
}@Composable
fun AutoIncrementTest3() {var count = remember {mutableStateOf(0);}Row(modifier = Modifier.padding(20.dp),verticalAlignment = Alignment.CenterVertically) {Text(text = "${count.value}",Modifier.padding(horizontal = 15.dp))//用到的时候需要.value获取Button(onClick = { count.value++ }) {Text(text = "auto-increment ")}}
}

这时候,在点击按钮的时候,Text上显示的就是自增的数字。

您可以将 remember 视为一种在组合中存储单个对象的机制,就像私有 val 属性在对象中执行的操作一样。

当然我们还可以优化下,上面每次使用count的时候,都需要用.value来获取,这里再引入一个关键字by,修改后的代码如下:

setContent {ComposeTestTheme {Surface(color = MaterialTheme.colors.background,) {AutoIncrementTest2()}}
}@Composable
fun AutoIncrementTest3() {var count by remember {mutableStateOf(0);}Row(modifier = Modifier.padding(20.dp),verticalAlignment = Alignment.CenterVertically) {Text(text = "${count}",Modifier.padding(horizontal = 15.dp))Button(onClick = { count++ }) {Text(text = "auto-increment ")}}
}

使用by实现了属性委托,就是属性的 setget 的操作交给另一个对象器完成。我们可以间接读取 count 并将其设置为可变,而无需每次都显式引用 MutableStatevalue 属性。

总结:

  • mutableStateOf: 表明某个变量是有状态的,对变量进行监听,当状态改变时,可触发重绘。
  • remember :记录变量的值,使得下次绘制执行的时候,不会再次进行初始化。

三、rememberSaveable 的使用

remember 函数仅在可组合项包含在组合中时起作用。旋转屏幕后,整个 activity 都会重启,所有状态都将丢失。当发生任何配置更改或者进程终止时,也会出现这种情况。

可以使用 rememberSaveable,而不使用 remember。这会保存每个在配置更改(如旋转)和进程终止后保留下来的状态。

 var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

运行应用,旋转屏幕,更改为深色模式,或者终止进程。除非您之前退出了应用,否则系统不会显示初始配置屏幕。

参考文章
Compose中的remember和mutableStateOf
Google官方教程

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

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

相关文章

C#基础知识点记录

目录 课程一、C#基础1.C#编译环境、基础语法2.Winform-后续未学完 课程二、Timothy C#底层讲解一、类成员0常量1字段2属性3索引器5方法5.1值参数(创建副本,方法内对值的操作,不会影响原来变量的值)5.2引用参数(传的是地…

Unix System V BSD POSIX 究竟是什么?

学习Linux系统,很多同学对这些单词概念很模糊、一脸懵逼! 黄老师觉得,了解了历史,才会真正明白这些单词的含义,坐稳、黄老师发车了!!! 首先介绍一下什么是Unix? UNIX(非复用信息和计算机服务,英语:Uniplexed Information and Computing Service,UnICS)取“UNI…

ELK日志收集系统(四十九)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、概述 二、组件 1. elasticsearch 2. logstash 2.1 工作过程 2.2 INPUT 2.3 FILETER 2.4 OUTPUTS 3. kibana 三、架构类型 3.1 ELK 3.2 ELKK 3.3 ELFK 3.5 EF…

HTML 与 CSS 有什么区别?

HTML(超文本标记语言)和 CSS(层叠样式表)是构建网页的两个核心技术。HTML负责定义网页的结构和内容,而CSS则用于控制网页的样式和布局。虽然它们在构建网页时密切相关,但它们在功能和用途上有明显的区别。 …

go语言-协程

mOS结构体 每一种操作系统不同的线程信息 g给g0栈给g0协程内存中分配的地址,记录函数跳转信息, 单线程循环 0.x版本 1.0版本 多线程循环 操作系统并不知道Goroutine的存在 操作系统线程执行一个调度循环,顺序执行Goroutine 调度循环非常…

【LeetCode周赛】LeetCode第359场周赛

LeetCode第359场周赛 判别首字母缩略词k-avoiding 数组的最小总和销售利润最大化找出最长等值子数组 判别首字母缩略词 给你一个字符串数组 words 和一个字符串 s ,请你判断 s 是不是 words 的 首字母缩略词 。 如果可以按顺序串联 words 中每个字符串的第一个字符…

css-grammar

语法格式 选择器 {属性名称 : 属性值; 属性名称 : 属性值;...}语法特点: CSS声明总是以键值对(key\value)形式存在。CSS声明总是以分号(;)结束。声明组以大括号({})括起来。为了让CSS可读性更强,每行只描述一个属性。 CSS 注释 注释是用来解释你的代码&#xff…

vue Cesium接入在线地图

Cesium接入在线地图只需在创建时将imageryProvider属性换为在线地图的地址即可。 目录 天地图 OSM地图 ArcGIS 地图 谷歌影像地图 天地图 //矢量服务let imageryProvider new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?s…

大数据组件-Flume集群环境的启动与验证

🥇🥇【大数据学习记录篇】-持续更新中~🥇🥇 个人主页:beixi 本文章收录于专栏(点击传送):【大数据学习】 💓💓持续更新中,感谢各位前辈朋友们支持…

【python爬虫】中央气象局预报—静态网页图像爬取练习

静态网页爬取练习 中央气象局预报简介前期准备步骤Python爬取每日预报结果—以降水为例 中央气象局预报简介 中央气象台是中国气象局(中央气象台)发布的七天降水预报页面。这个页面提供了未来一周内各地区的降水预报情况,帮助人们了解即将到来…

深入学习 cnf问题 和 SAT 算法

前言 SAT问题是一个重要的计算机科学和人工智能问题,它涉及在给定的布尔变量集合和子句集合下,确定是否存在一种变量赋值使得整个合取范式成为真。这个问题在实际应用中有广泛的用途,包括硬件设计、安全协议验证等。 怎么看待 cnf cnf 文件本…

如何高效地设计测试用例并评审

编写出好的测试用例是每一个测试工程师的职责,但在实际工作中大家写的测试用例往往需要不断地修改才能使用,这不仅浪费了时间,还容易让测试工程师产生自我否定的情绪,甚至在团队中产生各种矛盾。 那如何高效地设计测试用例呢&…

【pyqt5界面化工具开发-14】初始牛刀-登录工具

目录 0x00 前言: 一、准备好ui的加载 二、获取对应的触发事件 三、触发事件绑定 三、输入内容的调用 三、完善登录逻辑 0x00 前言: 在逻辑代码的处理添加数据包的请求,返回数据包的判断,就可以完整实现登录检测的一个界面化…

Android.mk开发模板

今天简单写了一个 Android.mk 的示例模板,供初学者参考。 本模板主要给大家示例 Android NDK 开发中的如下几个问题: 如何自动添加需要编译的源文件列表如何添加第三方静态库、动态库的依赖如何构造一个完整的NDK工程框架 假设我们的项目依赖 libmath.…

前后端分离不存在会话,sessionid不一致问题

目录 1.使用拦截器解决跨域的示例: 2.使用redis,不使用session 前后端不分离项目我们可以通过session存储数据,但是前后端分离时不存在会话,每次请求sessionid都会改变,当值我们储存的数据不能取出来。 1.使用拦截器…

stable diffusion实践操作-webUI教程-不是基础-是特例妙用

系列文章目录 stable diffusion实践操作 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、SD webUI是什么?二、详细教程1. 相关插件安装1.1. 提示词插件安装和使用1.2. upscale 放…

Rust 进阶学习

Rust 进阶学习 文章目录 Rust 进阶学习所有权作用域移动和克隆涉及函数的所有权机制涉及参数的所有权涉及返回值的所有权 引用和租借可变引用 枚举类枚举成员的属性枚举匹配 结构体结构体方法结构体关联函数 错误处理不可恢复错误可恢复错误 Rust代码组织管理Module默认的Modul…

JavaScript原型链污染

前言 在浏览某个论坛的时候,第一次看到了JavaScript原型链污染漏洞。当时非常的好奇,当时我一直以为js作为一种前端语言,就算存在漏洞也是针对前端,不会危害到后端,因此我以为这种漏洞危害应该不大。可当我看到他的漏…

简明易懂:Python中的分支与循环

文章目录 前言分支结构if 语句:单一条件判断else语句:提供备选方案elif 语句:多条件判断嵌套的分支结构:复杂条件逻辑 循环结构for循环:遍历序列range()函数与for循环while循环:条件重复循环控制&#xff1…

PAT编程基础笔记

写在前面&#xff1a; 这篇文章是我之前刷PAT(Basic Level)随手记下来的几个记忆点&#xff0c;希望对大家有所帮助。 1.字符串和数值类型之间的转换&#xff1a; 如果要将数值类型如int、double、long转换为字符串string&#xff0c;可以使用to_string()函数 #include<s…