Compose基础入门

Compose基础入门

本文链接：https://blog.youkuaiyun.com/feather_wch/article/details/132139415

Compose项目配置开关

app的build.gradle

android {
   
   

    buildFeatures {
   
   
        compose true // compose
    }
    composeOptions {
   
   
        kotlinCompilerExtensionVersion '1.3.2' //编译时注解
    }
}

dependencies {
   
   

// Compose相关
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    implementation 'androidx.compose.material3:material3'

    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'
}

ComponentActivity中通过setContent方法达到以前setContentView的效果

class MainActivity : ComponentActivity() {
   
   
    override fun onCreate(savedInstanceState: Bundle?) {
   
   
        super.onCreate(savedInstanceState)

        setContent {
   
   
            // xxx
        }
    }
}
// 
androidx.activity:activity-compose:1.5.1@aar
--ComponentActivity.kt
    ->ComponentActivity.setContent

Compose是什么？

1、为什么要用Compose？

1. 声明式的UI框架
2. 组合替换继承

2、为什么使用组合？

1. 组合获得布局能力
2. 粒度更细，更灵活
3. 可以解决Java中单个父类的限制

3、Compose和View、ViewGroup的区别：

1. Compose不存在多层绘制问题

4、Compose是如何实现的？

1. 会形成ComposeUiNode和LayoutNode等各种节点
2. text等微件对应于LayoutNode和Node组成树形结构

5、还需要Fragment吗？

不需要了，单个Activity可以搞定一切

6、微件相对无状态，不再提供getter和setter方法

State状态管理

1、remember和mutableStateOf

1. 数据驱动ui
2. 数据就需要有状态 => MutableStateOf

2、为什么需要remember+mutableStateOf(“”) 才会改变输入框的数据？

1. 一起管理状态
2. mutableStateOf 是 Compose 中的一个函数，用于创建可变的状态。它接受一个初始值，并返回一个包装了该值的 MutableState 对象。MutableState 对象可以在 Composable 函数中读取和更改，而且当其值发生变化时，Compose 会自动进行重新绘制。
3. remember 是 Compose 中的一个函数，用于在 Composable 函数中记住一个值。它类似于常规 Android 中的 savedInstanceState，但它是为 Compose 中的状态管理而设计的。

3、写一个复选框

    @Composable
    fun MyCheckBox(){
   
   
        var checked by remember{
   
   
            mutableStateOf(false)
        }
        Checkbox(checked = checked, onCheckedChange = {
   
   
            checked = it
        })
    }

3、remember内部是cache，get/put，相当于hashmap

实时预览 动画执行

Preview预览：

@Preview(showBackground = true, showSystemUi = true)

Compose和View/ViewGroup的关联😁

setContentView的原理是什么？

1. 从DecorView中获取到ContentView，并设置进去
2. DecorView由ContentView和TitleView组成

Compose中的contentview

1. contentview就是ComposeView，内部会加载我们实现的部分AndoridComposeView(多套了一层壳)
2. 根节点是layoutnode，其他微件都是该树的节点
3. compose是国中国，有自己的绘制流程

LazyColumn和RecyclerView区别

1. RV从缓存拿数据可以不create view，直接bind view

2. LazyColumn：状态管理，每次都会新建，走一遍流程。会根据当前状态去描绘UI

3. 不再需要适配器：LazyColumn

改属性，改xx

compose搭建app就一个activity结构最好。androudcomposeview就一个。

Box 帧布局 FrameLayout

内置函数

remmember

属性

所有属性都会转为xxxModify

Modify

// SizeModifier = Modifier.size(10.dp, 10.dp)
// 每个Text、Image都会转为 一个LayoutNode
// 链式加入到
SizeModifier