Compose基础入门_compose-multiplatform入门-优快云博客

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？

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

2、为什么使用组合？

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

3、Compose和View、ViewGroup的区别：

Compose不存在多层绘制问题

4、Compose是如何实现的？

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

5、还需要Fragment吗？

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

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

State状态管理

1、remember和mutableStateOf

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

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

一起管理状态
mutableStateOf 是 Compose 中的一个函数，用于创建可变的状态。它接受一个初始值，并返回一个包装了该值的 MutableState 对象。MutableState 对象可以在 Composable 函数中读取和更改，而且当其值发生变化时，Compose 会自动进行重新绘制。
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的原理是什么？

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

Compose中的contentview

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

LazyColumn和RecyclerView区别

RV从缓存拿数据可以不create view，直接bind view
LazyColumn：状态管理，每次都会新建，走一遍流程。会根据当前状态去描绘UI
不再需要适配器：LazyColumn

改属性，改xx

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

Box 帧布局 FrameLayout

内置函数

remmember

属性

所有属性都会转为xxxModify

Modify

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

Compose基础入门