Android笔记（九）：Compose组件的状态（一）

news2024/11/24 5:28:09

在使用Compose定义UI界面时，可以发现界面的变换往往与Compose组件内部的状态相关，当状态值发生变化时，Compose构成的可组合的界面也会刷新发生相应的变化。将在本笔记中将对可组合项的状态的定义、状态提升、状态丢失和状态的保存进行简单介绍。。

一、什么是可组合项的状态

Compose采用了单向数据流设计思想。定义界面的可组合函数本身没有任何返回值，也没有像类一样封装内部的私有状态。因此通过定义可组合函数的状态，使得可组合函数关联的界面可以观察是否发生了变化。

在Kotlin语言中定义了一个接口MutableState，代码如下：

interface MutableState : State {
override var value: T
}

实现MutableState接口的任何类型的对象就是一个状态，状态是可变的，每个状态中保存一个value值。在执行可组合函数期间读取 value 属性。如果value属性值发生了变化，则可组合函数会发生重构，如果value属性值没有变化，则不会产生可组合函数的重构。 Compose组件可以通过mutableStateOf函数来获得一个这样的状态对象。例如：

val someState = mutableStateOf(true)

例如在上述的定义中， someState就会被解析为一个可以存储Boolean布尔真值的可变状态值。

Android结合remember API可以将状态值保存到内存中，当在内存中记住这个状态值。这样的好处就是，系统会在初始组合期间将由 remember 计算的值存储在组合中，并在重组期间返回存储的值。当remember和状态值结合，会非常容易对可组合函数的重构产生作用，因为remember记住的状态值在内存中。当然，remember不仅仅与可变的状态值组合，也可以与非可变值组合。

在可组合项中声明 MutableState 对象的方法有三种：

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember{ mutableStateOf(default) }

1.方式一:val mutableState = remember { mutableStateOf(default) }

这种方式是直接通过状态的引用来获取或设置value属性值
需要导入

import androidx.compose.runtime.remember

示例代码如下：

@Preview
@Composable
fun CountScreen(){
    val counterState = remember{mutableStateOf(0)}

    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center){
        //引用状态值
        Text(text = "点击的次数：${counterState.value}",fontSize = 20.sp)
        Button(onClick={
            //修改状态值
            counterState.value += 1
        }){
            Text("点击按钮",fontSize = 18.sp)
        }
    }
}

在这种方式中，是直接引用以及修改状态counterState的value属性值。当状态值发生变化界面也进行重构。运行效果如下所示：
在这里插入图片描述
图1运行效果

2.方式二：var value by remember { mutableStateOf(default) }

在这种方式中，采用了代理的方式来直接获取或设置状态内部包含的value属性值。在这种方式中必须导入：

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.remember

示例代码如下

@Preview
@Composable
fun CountScreen(){
    var counter by remember {mutableStateOf(0)}

    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center){
        Text(text = "点击的次数：${counter}",fontSize = 20.sp)
        Button(onClick={
            //修改状态值
            counter += 1
        }){
            Text("点击按钮",fontSize = 18.sp)
        }
    }
}

在上述代码中，直接将状态包含的value值进行设置和修改。因此,上述代码的counter就是一个var变量，实际上就是对应状态的value属性值。
这时，运行效果如图1所示

3.方式三：val (value, setValue) = remember{ mutableStateOf(default) }

第三种方式表达形式有些奇怪。其中value对应的是状态的value属性的值，而设置状态的value属性是通过指定的setValue来实现的。
示例代码如下：

@Preview
@Composable
fun CountScreen(){
    val (counter,setValue) = remember {mutableStateOf(0)}

    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center){
        Text(text = "点击的次数：${counter}",fontSize = 20.sp)
        Button(onClick={
            //修改状态值
            setValue(counter+1)
        }){
            Text("点击按钮",fontSize = 18.sp)
        }
    }
}

这时，运行效果如图1所示

二、无状态的可组合函数和有状态的可组合函数

因为可组合函数对参数的处理不同导致了两种形式的可组合函数。

1.无状态的可组合Stateless Composable

无状态的可组合形式，就是函数定义形参，通过调用时依赖传递的实参，实现界面的重构。这种的可组合形式称为无状态的可组合。如下列代码所示：

@Composable
fun CountScreen(counter:Int){
    Box(contentAlignment= Alignment.Center,modifier = Modifier.size(300.dp,200.dp)){
        Text(text = "点击的次数：${counter}",fontSize = 20.sp)
    }
}

要调用以上的可组合函数，必须传递一个整型的数值。

2.有状态的可组合Stateful Composable

有状态的可组合形式，就是函数没有定义形参。通过定义内部的状态值，如果状态值发生变化，会导致界面进行重构。在下列定义的DisplayScreen就是一个有状态的可组合函数。DisplayScreen通过点击按钮，使得状态值发生变化，导致界面的重构。在该函数中实现对上述无状态可组合函数CountScreen的调用，代码如下：

@Preview
@Composable
fun DisplayScreen(){
    //定义状态值 
    var counter by remember{mutableStateOf(0)}
   Column(modifier=Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally){
            //调用无状态的可组合函数CountScreen
            CountScreen(counter)
            Button(onClick = {
                counter+=1
            }){
                Text("点击按钮")
            }
        }
}

以上两个可组合函数很好的解释了什么是无状态的和有状态的。

三、状态提升

在组合函数中，在上述的CounterScreen可组合函数中，内部状态值的变化，导致可组合进行界面的重组。如果其他可组合项共用界面元素状态，并在不同位置将界面逻辑应用到状态，则这时需要在界面层次结构中提升状态所在的层次。这样做会使可组合项的可重用性更高，并且更易于测试。具体表现形式是：将有状态的可组合函数中的状态移至可组合项的调用方，使得原来的有状态的可组合函数变成无状态的形式。

场景一：有状态的可组合函数，没有状态提升

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DisplayScreen(){
   val messageState = remember{mutableStateOf("")}
    
   Row(horizontalArrangement = Arrangement.Center, modifier = Modifier.fillMaxWidth()){
           TextField(
               modifier = Modifier.wrapContentWidth(),
               value = "${messageState.value}",
               label = {
                   Text("消息")
               },
               leadingIcon={
                   Icon(Icons.Filled.Info,contentDescription = "message")
               },
               onValueChange={
                   messageState.value = it
               })
   }
}

场景二：状态提升

状态提升常规需要对相应的状态需要考虑替换成可组合函数的两个参数：

  • value：T：需要修改的状态的值
  • action(T)->Unit :请求修改值的事件

修改上述函数，如下所示：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DisplayScreen(message:String,action:(String)->Unit){

   Row(horizontalArrangement = Arrangement.Center, modifier = Modifier.fillMaxWidth()){
           TextField(
               modifier = Modifier.wrapContentWidth(),
               value = "${message}",
               label = {
                   Text("消息")
               },
               leadingIcon={
                   Icon(Icons.Filled.Info,contentDescription = "message")
               },
               onValueChange={
                  action.invoke(it)
               })
   }
}

这个DisplayScreen函数修改为一个无状态的函数，需要调用该函数，形式如下：

@Preview
@Composable
fun MainScreen(){
    var input by remember{mutableStateOf("请输入")}

    Box(modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center){
        //调用无状态的可组合函数DisplayContent
        DisplayContent(message = input,action = {it:String->
               input = it
        })
    }
}

在MainScreen中通过传递实参input和对应action事件给DisplayScreen，这样，使得原来的DisplayScreen函数的状态提升到MainScreen中。

三、状态丢失

任何Android应用都可能因为活动Activity重新创建或者进程，导致丢失界面的状态。
现在，修改手机（模拟器）的设置Settings->Display->Auto-rotate Screen为true，如下所示：
在这里插入图片描述
图2 设置模拟器的为自动旋转
运行上述的DisplayScreen，然后旋转手机模拟器，运行情况如下图所示：

在这里插入图片描述
图3 DisplayScreen界面的运行效果
配置的变化导致状态丢失，会导致移动应用运行的连续性遭到破坏。

四、保留状态

要解决重新创建活动或进程导致状态的丢失问题，则可以通过rememberSaveable来保留状态，使得重新创建活动或进程依然可以使用原有的状态。
rememberSaveable 通过保存的实例状态机制将界面元素状态存储在 Bundle 中。

  • 自动将基元类型存储到 Bundle 中。
  • 如果是自定义的类实现Parcelable，实现序列化，可以通过Bundle来传递数据。
  • 使用listSaver 和 mapSaver 等 ComposeAPI
  • 实现会扩展 Compose 运行时 Saver 类的自定义 Saver类。

方式一：自动将基元类型和实现Parcelable接口的类型的数据存储到 Bundle 中

任何基元类型如String、Int、Double、Float、Boolean、Short、Long等以及实现parcelable接口自定义类型的对象，可以通过rememberSaveable中的状态会随着onSaveInstanceState以Bundle的键值对的形式进行存储。这里的关键字就是Composable函数在编译期确定的唯一标识。通过这个唯一标识，可以将数据按照键值对保存在Bundle，并通过这个关键字进行数据恢复。

在下列示例中，自定义类，因为需要实现Parcelable，为了简化代码，需要在项目模块的build.gradle.kt中设置使用kotlin-parcelize插件。

plugins {     
	id("kotlin-parcelize") 
}

自定义一个数据类Employee，代码如下：

@Parcelize
data class Employee(val name:String,val gender:String,var salary:Double): Parcelable

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun EmployeeScreen(){
    val userState = rememberSaveable {
        mutableStateOf(Employee("张三","男",5000.0))
    }
    var salary by rememberSaveable{mutableStateOf(0.0)}

    Box(contentAlignment = Alignment.Center,modifier = Modifier.fillMaxSize()){
        Column{
            Text(userState.value.toString())
            TextField(
                value = "${salary}",
                label={
                    Text("修改工资：")
                      },
                leadingIcon = {
                    Icon(imageVector = Icons.Filled.Info,contentDescription = "工资")
                },
                onValueChange = {
                    salary = it.toDouble()
                })
            Button(onClick ={
                userState.value.salary = salary
            }){
                Text("修改工资")
            }
        }
    }
}

在上述的代码中，定义了两处可保存的状态：

val userState = rememberSaveable {
mutableStateOf(Employee(“张三”,“男”,5000.0))
}

var salary by rememberSaveable{mutableStateOf(0.0)}

运行结果如下图所示：
在这里插入图片描述
图4 EmployeeScreen的运行效果

在这个简单应用中,当屏幕没有横纵屏切换，修改文本框的值，点击按钮，第一行的文本并没有发送变化。这是因为Text中显示UserState.value对应的对象并没有变化，只是变化了UserState.value对象的属性salary的值而已。因此，点击按钮没有发生文本的变换。但是，当切换屏幕的横纵方向时，因为重新创建屏幕依附的活动，导致从Bundle数据中读取已经保存的状态值，第一行的文本内容会发生相应的变化。

方式二：实现会扩展 Compose 运行时 Saver 类的自定义 Saver类

自定义Saver类，自定义保存状态值的逻辑。通过自定义的Saver类定制数据保存的方式和数据恢复的方式。下面定义一个对应上例Employee数据类的EmployeeSaver类定制保存和恢复Employee数据的逻辑，代码如下：

object EmployeeSaver: Saver<Employee, Bundle> {
    //恢复成Employee对象
    override fun restore(value: Bundle): Employee? {
        return value.getString("name")?.let{name:String->
            value.getString("gender")?.let{gender:String->
                value.getDouble("salary")?.let{salary:Double->
                    Employee(name,gender,salary)
                }
            }
        }
    }
    //保存到Bundle中
    override fun SaverScope.save(value: Employee): Bundle? {
        return Bundle().apply{
            putString("name",value.name)
            putString("gender",value.gender)
            putDouble("salary",value.salary)
        }
    }
}

然后修改EmployeeScreen可组合函数，将Employee对象的存储和恢复按照EmployeeSaver指定的逻辑进行，对应的代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun EmployeeScreen(){
    val userState = rememberSaveable(stateSaver = EmployeeSaver) {
        mutableStateOf(Employee("张三","男",5000.0))
    }
    var salary by rememberSaveable{mutableStateOf(0.0)}

    Box(contentAlignment = Alignment.Center,modifier = Modifier.fillMaxSize()){
        Column{
            Text("${userState.value}")
            TextField(
                value = "${salary}",
                label={
                    Text("修改工资：")
                      },
                leadingIcon = {
                    Icon(imageVector = Icons.Filled.Info,contentDescription = "工资")
                },
                onValueChange = {
                    salary = it.toDouble()
                })
            Button(onClick ={
                userState.value.salary = salary
            }){
                Text("修改工资")
            }
        }
    }
}

运行结果如图4一致。

方式三：使用listSaver 和 mapSaver 等 ComposeAPI进行数据保存和恢复

通过listSaver和mapSaver等Compose API定制保存和恢复数据的逻辑，修改上述的EmployeeScreen函数，代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun EmployeeScreen(){
    //定义保存和恢复数据的逻辑
    val employeeSaver = run{
        mapSaver(save = {
                        //定义映射的方式指定键值对进行数据保存逻辑
                        mapOf("name" to it.name,"gender" to it.gender,"salary" to it.salary)
                        },
            restore={
                		//定义数据根据映射恢复数据的逻辑
                		Employee(it["name"] as String,it["gender"] as String,it["salary"] as Double)
            })
    }
    
    val userState = rememberSaveable(stateSaver = employeeSaver) {
        mutableStateOf(Employee("张三","男",5000.0))
    }
    var salary by rememberSaveable{mutableStateOf(0.0)}

    Box(contentAlignment = Alignment.Center,modifier = Modifier.fillMaxSize()){
        Column{
            Text("${userState.value}")
            TextField(
                value = "${salary}",
                label={
                    Text("修改工资：")
                      },
                leadingIcon = {
                    Icon(imageVector = Icons.Filled.Info,contentDescription = "工资")
                },
                onValueChange = {
                    salary = it.toDouble()
                })
            Button(onClick ={
                userState.value.salary = salary
            }){
                Text("修改工资")
            }
        }
    }
}

运行结果如图4一致。

参考文献

(1) 状态和JetPack Compose
https://developer.android.google.cn/jetpack/compose/state?hl=zh-cn

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

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

相关文章

Linux(Centos)防火墙允许通过端口增加操作记录

Linux(Centos)防火墙允许通过端口增加操作记录

1、nginx -t #Nginx配置文件检查 上述截图代表检查没问题 上述截图检查配置文件配置错误&#xff0c;并提示错误文件位置 2、systemctl restart nginx #重启Nginx 重启Nginx失败 3、systemctl status nginx.service #查看Nginx服务状态 80端口被占导致服务启动失败 4、n…
阅读更多...
Spring Boot进阶(93)：体验式教程：手把手教你整合Spring Boot和Zipkin

Spring Boot进阶(93)：体验式教程：手把手教你整合Spring Boot和Zipkin

&#x1f4e3;前言 分布式系统开发中&#xff0c;服务治理是一个比较重要的问题。为了更好地实现服务治理&#xff0c;需要解决服务跟踪问题&#xff0c;即如何对分布式系统中的服务进行监控和追踪。本文将介绍如何使用Zipkin进行服务跟踪&#xff0c;并结合Spring Boot进行整合…
阅读更多...
【操作系统】文件管理大题总结

【操作系统】文件管理大题总结

【操作系统】文件管理大题总结 文章目录 【操作系统】文件管理大题总结前置知识操作系统中的存储单位转换 1、目录管理中的典型问题分析基础例题&#xff1a;往年真题 2、外存的组织方式中的典型问题分析基础例题王道课后题往年真题 3、文件存储空问管理中的典型问题分析基础例…
阅读更多...
Linux ln命令：建立链接文件

Linux ln命令：建立链接文件

如果要想说清楚 ln 命令&#xff0c;则必须先解释下 ext 文件系统&#xff08;Linux 文件系统&#xff09;是如何工作的。我们在前面讲解了分区的格式化就是写入文件系统&#xff0c;而我们的 Linux 目前使用的是 ext4 文件系统。如果用一张示意图来描述 ext4 文件系统。 ext4 …
阅读更多...
Django之登录注册

Django之登录注册

最近在准备上线一个网站&#xff08;基于django的编程技术学习与外包服务网站&#xff09;&#xff0c;所以会将自己的在做这个项目的过程中遇到的模块业务以及所涉及到的部分技术记录在CSDN平台里&#xff0c;一是希望可以帮到有需要的同学&#xff0c;二十以供自己后续回顾学…
阅读更多...
Jmeter调用Python脚本实现参数互相传递的实现

Jmeter调用Python脚本实现参数互相传递的实现

这篇文章主要介绍了Jmeter调用Python脚本实现参数互相传递的实现&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 接口性能测试时&#xff0c;接口请求参数是根据一…
阅读更多...
蓝桥杯每日一题2023.10.28

蓝桥杯每日一题2023.10.28

题目描述 递增三元组 - 蓝桥云课 (lanqiao.cn) 题目分析 60分解法&#xff1a; 直接暴力循环每一个数进行比较 #include<bits/stdc.h> using namespace std; const int N 2e5 10; typedef long long ll; ll n, a[N], b[N], c[N], ans; int main() {cin >> n;…
阅读更多...
C++STL---Vector、List所要掌握的基本知识

C++STL---Vector、List所要掌握的基本知识

绪论​ 拼着一切代价&#xff0c;奔你的前程。 ——巴尔扎克&#xff1b;本章主要围绕vector和list的使用&#xff0c;以及容器底层迭代器失效问题&#xff0c;同时会有对原码的分析和模拟实现其底层类函数。​​​​话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑…
阅读更多...
shouldComponentUpdate 是做什么的？

shouldComponentUpdate 是做什么的？

目录 前言 生命周期函数 shouldComponentUpdate 的写法和用法 代码 事件和API 优缺点 方法 总结 理论 结论 shouldComponentUpdate 是 React 类组件中的一个生命周期方法&#xff0c;用于决定一个组件的 props 或 state 发生变化时是否应该重新渲染。默认情况下&…
阅读更多...
HBuilderX 自定义语法提示

HBuilderX 自定义语法提示

在开发实践中&#xff0c;会使用到各种第三方组件&#xff0c;比如Element UI&#xff0c;通常的做法是到官网中复制模板再在本地根据设计要求进行修改&#xff0c;或是从其它已经实现的组件中复制相似的内容。但每次复制粘贴确实比较麻烦。 在HBuilderx中可以设置代码块来创建…
阅读更多...
上海高考语文命题趋势和备考建议？附1990年-2023年高考语文真题和答案资源

上海高考语文命题趋势和备考建议？附1990年-2023年高考语文真题和答案资源

虽然语文是我们的母语&#xff0c;但是语文从小到大都是我们学习的重点&#xff0c;更是难点&#xff0c;分值也是最高的科目之一。甚至很多时候&#xff0c;语文科目的分值差会带来最终的分值差。综观各个省市的高考状元&#xff0c;基本上语文科目都在130分以上&#xff08;满…
阅读更多...
JAVA中的垃圾回收器(1)

JAVA中的垃圾回收器(1)

一)垃圾回收器概述: 1.1)按照线程数来区分: 串行回收指的是在同一时间端内只允许有一个CPU用于执行垃圾回收操作&#xff0c;此时工作线程被暂停&#xff0c;直至垃圾回收工作结束&#xff0c;在诸如单CPU处理器或者较小的应用内存等硬件平台不是特别优越的场合&#xff0c;出行…
阅读更多...
【每日一题】合并两个有序数组

【每日一题】合并两个有序数组

链接奉上&#xff1a;合并两个有序数组 目录 直接合并后排序&#xff1a;思路&#xff1a;代码实现&#xff1a; 双指针思路&#xff1a;代码实现&#xff1a; 直接合并后排序&#xff1a; 思路&#xff1a; 将nums2直接合并到nums1后边&#xff0c;并进行排序 代码实现&…
阅读更多...
LeetCode题：1：两数之和

LeetCode题：1：两数之和

&#xff08;1&#xff09;、题目要求&#xff1a; &#xff08;2&#xff09;、解题思路&#xff1a; 由上图可知&#xff0c;target 20&#xff0c;这题有多种解法 1、暴力枚举的方法&#xff1a; 但是这样时间复杂度就很高了&#xff0c;要定义两个下标&#xff0c;列举出所…
阅读更多...
CSP-J 2023 第二轮认证入门级(含答案)

CSP-J 2023 第二轮认证入门级(含答案)

一。题目 二。答案 T1 ⼩苹果&#xff08;apple&#xff09; 每⼀轮拿掉的苹果数量为 。模拟拿苹果的过程&#xff0c;每⼀轮中令 &#xff0c;当 时最后⼀个苹果会被拿掉。 时间复杂度为对数。 #include <iostream> using namespace std; int n; int ans1, ans2; boo…
阅读更多...
Ajax学习笔记第三天

Ajax学习笔记第三天

做决定之前仔细考虑&#xff0c;一旦作了决定就要勇往直前、坚持到底&#xff01; 【1 ikunGG邮箱注册】 整个流程展示&#xff1a; 1.文件目录 2.页面效果展示及代码 mysql数据库中的初始表 2.1 主页 09.html:里面代码部分解释 display: inline-block; 让块元素h1变成行内…
阅读更多...
第二次课10.28

第二次课10.28

hash 计算接口 Crypto API &#xff08;证书&#xff0c;对称加密&#xff0c;非对称加密&#xff0c;编码和解码&#xff09; CryptAcquireContext CryptCreateHash CryptReleaseContext CryptHashData CryptDestroyHash CryptGetHashParam 注册表操作接口 RegEnumKeyEx RegE…
阅读更多...
如何快速解决d3dcompiler_43.dll缺失问题?五种方法快速解决

如何快速解决d3dcompiler_43.dll缺失问题?五种方法快速解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“D3DCompiler_43.dll缺失”。这个错误通常会导致游戏、应用程序或系统无法正常运行。为了解决这个问题&#xff0c;我们需要采取一些修复方案来恢复缺失的文件。本文将介绍五个修复D3DCompi…
阅读更多...
Vue 3响应式对象: ref和reactive

Vue 3响应式对象: ref和reactive

目录 什么是响应式对象&#xff1f; Ref Reactive Ref vs Reactive 适用场景&#xff1a; 访问方式&#xff1a; 引用传递&#xff1a; 性能开销&#xff1a; 响应式对象优点 响应式对象缺点 总结 Vue 3作为一种流行的JavaScript框架&#xff0c;提供了响应式编程的…
阅读更多...
Linux中shell脚本中的运算

Linux中shell脚本中的运算

目录 一、运算符号 二、运算指令 三、练习 一、运算符号 加法-减法*乘法/除法%除法后的余数**乘方自加一--自减一 <小于<小于等于>大于>大于等于等于ji&#xff0c;jji*jj*i/jj/i%jj%i 二、运算指令 (()) ##((a12)) let ##let a12 expr ##expr 1 2 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023