• Compose原理-视图和数据双向绑定的原理


    前言:

    Compose是天生的声明式编程,自带MVVM的特性。那么这个特性能怎么用的,如何实现数据绑定的呢?其原理是怎么样的呢?那么今天就来试一下。

    一.实验Demo

    逻辑很简单,就是先显示一个Text,内容为aaa。然后开启线程5S后修改数据为bbb。

    首先先是第一版代码:

    1. class ComposeActivity : ComponentActivity() {
    2. var uiState by mutableStateOf(Student())
    3. override fun onCreate(savedInstanceState: Bundle?) {
    4. super.onCreate(savedInstanceState)
    5. val student = Student()
    6. setContent {
    7. Greeting(uiState.name)
    8. }
    9. Thread {
    10. Thread.sleep(5000)
    11. uiState.name = "bbb"
    12. Log.i(
    13. "test",
    14. "student.name:${student.name}, mutableStateOf.name:${uiState.name}"
    15. )
    16. }.start()
    17. }
    18. }
    19. @Composable
    20. fun Greeting(name: String) {
    21. Log.i(
    22. "test",
    23. "Greeting:${name}"
    24. )
    25. Text(text = "Hello $name!")
    26. }
    27. data class Student(
    28. var name: String = "aaa",
    29. val id: Int = 0
    30. )

    看起来没啥问题,但是一运行,发生5S之后并没有发生变化,显示的内容仍然是aaa。这是为何?

    对照着官方的例子发现有一点写错,官方的例子中给Model赋值时用的是类似下面这样的写法:

    uiState = uiState.copy(name = "bbb", id = 1)

    而我的写法是这样的:

    uiState.name = "bbb"

    改正之后,果然生效了,5S之后显示内容变成了bbb。

    这里为什么要强调我写错了呢?原因你也许猜到了,既然只有copy才生效,那么绑定的原理就在其中。(PS:其实只要把uiState赋值新对象就可以)

    二.绑定原理

    我们先看一下uiState = uiState.copy(name = "bbb", id = 1)这行代码反编译之后的java代码:

    this$0.setUiState(this$0.getUiState().copy(com.xt.composeapp.LiveLiterals.ComposeActivityKt.INSTANCE.String$arg-0$call-copy$arg-0$call-$set-uiState$$fun-$anonymous$$arg-0$call-$init$$$this$call-start$fun-onCreate$class-ComposeActivity(), com.xt.composeapp.LiveLiterals.ComposeActivityKt.INSTANCE.Int$arg-1$call-copy$arg-0$call-$set-uiState$$fun-$anonymous$$arg-0$call-$init$$$this$call-start$fun-onCreate$class-ComposeActivity()));

    代码很长,但是其实并不重要,只要看最前面即可:setUiState方法。kotlin中,只要给对象赋值,最终其实都会转化为调用setXXX方法。那我们进入setUiState方法看下。

    1. public final void setUiState(@NotNull Student var1) {
    2. Intrinsics.checkNotNullParameter(var1, "");
    3. MutableState $this$setValue$iv = this.uiState$delegate;
    4. KProperty property$iv = null;
    5. int $i$f$setValue = false;
    6. $this$setValue$iv.setValue(var1);//1这行代码
    7. }

    最终转换为了调用$this$setValue$iv的setValue方法。那么第一个对象是什么呢?其实就是我们之前声明的MutableState:

    private final MutableState uiState$delegate = SnapshotStateKt.mutableStateOf$default(new Student((String)null, 0, 3, (DefaultConstructorMarker)null), (SnapshotMutationPolicy)null, 2, (Object)null);
      

    所以1这行代码,最终其实会调用到MutableState的setValue方法。

    MutableState其实是一个接口,最终实现类其实是生成的对Student的一个观测对象。所以调用setValue的时候,判断值发生了变化,则会通知外层去重新刷新UI。

  • 相关阅读:
    2022年湖北中级工程师职称可以评哪些专业?甘建二
    新版AndroidStudio的Gradle窗口显示task list not built 问题解决
    Redis主从复制
    迅为龙芯开发板开发板系统烧写-启动系统
    交换两个数值(不用第三个变量
    k8s--基础--22.10--storageclass--类型--Azure 磁盘
    字节一面(云原生)
    2022谷粒商城学习笔记(四)商品服务三级分类
    【华为机试题分析】 6 质数因子
    基于SpringBoot使用MyBatisX插件
  • 原文地址:https://blog.csdn.net/AA5279AA/article/details/126087938