他是什么
Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API,可以帮助您简化并加快 Android 界面开发,打造生动而精彩的应用。
缺点
包体积增大, aab 集成compose之前:266451kb downloadsize 256.8MB
272052kb 262.2mb。为其支持的第三方库少
优势
减少耦合 增加内聚, 用更少的代码实现功能。编写代码只需要采用 Kotlin,而不必拆分成 Kotlin 和 XML 部分。
在 Compose 中,状态是显式的,并且会传递给相应的可组合项。这样一来,状态便具有单一可信来源。
Compose 使用声明性 API,这意味着您只需描述界面,Compose 会负责完成其余工作。这类 API 十分直观 。
声明式UI 相对于命令式UI 更加直观和逻辑清晰。您可以构建不与特定 activity 或 fragment 相关联的小型无状态组件。(比如实现recylerView ),
recyclerView 在布局加入
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:id="@+id/recycler_view"
android:layout_height="wrap_content" />
对应的item 布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:textColor="@color/red"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
初始化 recyclerView
mbinding.recyclerView.apply {
layoutManager=LinearLayoutManager(this@TestActivity)
adapter=TestAdapter(mutableListOf("test--->","test1--->", "test2--->"))
}
对应的Adapter
class TestAdapter(val mData: MutableList<String>) :
RecyclerView.Adapter<TestAdapter.TestViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TestViewHolder {
ItemTestAdapterItemBinding.inflate(LayoutInflater.from(parent.context)).apply {
return TestViewHolder(this)
}
}
override fun getItemCount(): Int {
return mData.size
}
override fun onBindViewHolder(holder: TestViewHolder, position: Int) {
val data = mData.get(position)
holder.bindData(data)
}
inner class TestViewHolder(val itemBinding: ItemTestAdapterItemBinding) :
RecyclerView.ViewHolder(itemBinding.root) {
fun bindData(data: String) {
itemBinding.textView.text = data
}
}
}
compose 实现
@Composable
fun testRecyclerView() {
val list = listOf("a", "b", "c")
LazyColumn {
items(list) {
Text(text = it, color = Color.Red,modifier = Modifier.fillMaxSize())
}
}
}
和当前View 体系的平替关系
布局:
RecyclerView ->LazyColum/LazyRow/LazyVerticalGrid/LazyHorizontalGrid/LazyVerticalStaggeredGrid /LazyHorizontalStaggeredGrid
LinearLayout->Row/Colum
FramLayout->Box
ViewPager->HorizontalPager/VerticalPager
FlowLayout(非官方)->FlowRow /FlowColumn
ConstraintLayout->ConstraintLayout
控件
TextView ->Text
EditTextView->TextField/OutlinedTextField
ImageView->Image/Icon/GlideImage(网络图)/AsyncImage(Coil网络图)
Button->Button/TextButton/ElevatedButton/OutlinedButton/FilledTonalButton
FloatingActionButton->FloatingActionButton/SmallFloatingActionButton/LargeFloatingActionButton/ExtendedFloatingActionButton
ProgressBar->LinearProgressIndicator /CircularProgressIndicator
SeekBar->Slider
修饰符
借助修饰符,您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作:
更改可组合项的大小、布局、行为和外观
添加信息,如无障碍标签
处理用户输入
添加高级互动,如使元素可点击、可滚动、可拖动或可缩放
修饰符是标准的 Kotlin 对象。您可以通过调用某个 Modifier
类函数来创建修饰符:
常见的align,border,alpha,background,clip,padding,size,clickable等
修饰符顺序影响:
Modifier
.clickable(onClick = onClick)
.padding(padding)
.fillMaxWidth()
Modifier
.padding(padding)
.clickable(onClick = onClick)
.fillMaxWidth()
更多。。https://developer.android.google.cn/develop/ui/compose/modifiers?hl=zh-cn
绘制不规则背景
Box(
Modifier
.drawBehind {
Path().apply {
val lineSize=15.dp()
moveTo(size.width/8f,size.height-2.dp())
lineTo(size.width/8f+lineSize/2,size.height+lineSize/2-2.dp())
lineTo(size.width/8f+lineSize,size.height-2.dp())
close()
drawPath(path = this, color = color_fotor_blue)
}
}
.clip(RoundedCornerShape(8.dp))
.background(color_fotor_blue)
.padding(horizontal = 8.dp, vertical = 2.dp)
) {
Text("请先阅读并同意后登录", color = white, fontSize = 11.sp)
}
重组触发顺序如下:
重组
智能重组:每当状态更新时,都会发生重组重组通常由对 State<T>
对象的更改触发
通过remember 关键字 创建MutableState<T> ,对MutableState的 value 所做的任何更改都会安排对读取 value 的所有可组合函数进行重组。
首先携带状态数据触发重组的View >> Compose的其他View重组 >> DisposableEffect >> SideEffect >> LaunchedEffect
Compose和View体系互相调用
在xml 种使用composeview
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
在代码种对他调用
setContent {
// 需要使用的compose 组件
}
在compose 中使用xml
AndroidView(factory = {
val view = LayoutInflater.from(it).inflate(R.layout.xxx, null)
view
}, modifier = Modifier.fillMaxSize())
Compose 中的附带效应
附带效应是指发生在可组合作用域之外的应用状态的变化,可组合项在理想情况下应该是无附带效应的,不过,有时附带效应是必要的,例如,触发一次性事件(例如显示信息提示控件),或在满足特定状态条件时进入另一个屏幕。
LaunchedEffect可以传递一个参数key,如果key发生变化,系统将取消现有协程,并在新的协程中启动新的挂起函数。
rememberCoroutineScope:获取组合感知作用域,以在可组合项外启动协程,比如onClick 代码块
rememberUpdatedState:在效应中引用值,该值在值发生更改时不应重启
DisposableEffect:需要清理的效果
SideEffect :使用 SideEffect 可确保在每次成功重组后执行该效果。
produceState:使用此协程将非 Compose 状态转换为 Compose 状态,例如将外部订阅驱动的状态(如 Flow、LiveData 或 RxJava)引入组合。
snapshotFlow:使用 [snapshotFlow
] 将[State<T>
] 对象转换为冷 Flow。
derivedStateOf:当可组合项输入的变化频率超过您需要的重组频率时,就应该使用 derivedStateOf
函数。这种情况通常是指,某些内容(例如滚动位置)频繁变化,但可组合项只有在超过某个阈值时才需要对其做出响应。
val showButton by remember {
derivedStateOf {
listState.firstVisibleItemIndex > 0
}
}