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