Compose和AndroidView的交互
1、在 ComposeUI 中加载 AndroidView 控件
Compose 中可以加载 AndroidView 还是比较简单的,直接引入 AndroidView 来加载 AndroidView 布局文件。
@Composable
fun Greeting(name: String) {
Column {
Text(text = "Hello $name!")
LoadAndroidView(name)
}
}
/**
* Compose中加载AndroidView
*/
@Composable
fun LoadAndroidView(name: String) {
var tvTittle: TextView? = null
AndroidView(factory = {
//加载AndroidView布局。
LayoutInflater.from(it).inflate(R.layout.activity_main, null).apply {
tvTittle = findViewById(R.id.tvTittle)
}
}) {
//更新UI数据
tvTittle?.text = name
}
}
factory
参数主要是用来初始化 AndroidView 布局,将 AndroidView 布局通过工厂模式转换成 ComposeUI 加载到 Compose 中,只会执行一行,第二个回调函数,主要是用来更新 UI 数据,ReCompose
可能会执行,所以我么初始化 AndroidView 的代码应该放在factory
参数中。
2、在 AndroidView 中加载 ComposeUI
AndroidView 中引入 ComposeView 直接在 AndroidView 的布局文件中加入 androidx.compose.ui.platform.ComposeView
控件,在代码中初始化 ComposeView,调用setContent
方法,就可以使用 ComposeUI 了。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tvTittle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="我是AndroidView" />
<androidx.compose.ui.platform.ComposeView
android:id="@+id/composeView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
class LoadComposeActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
findViewById<ComposeView>(R.id.composeView).apply {
setContent {
Column {
Text(text = "我是ComposeView")
}
}
}
}
}
3、LiveData 数据转换成 State 数据
LiveData 是 JetPack 组件的一部分,主要是在 AndroidView 中用来监听数据的变化,并且具有生命感知的,只有在 Activity 等处于活动才会触发数据更新。
State
是 Compose 中特有的用来更新 Ui 的数据框架。比如常用的mutableStateOf
, mutableListStateOf
等。
当 AndroidView 和 Compose 交互,将会可能涉及到LiveData
和State
数据的交换问题。
由于在 AndroidView 中常用 LiveData 来进行数据的订阅,而在 Compose 中使用的是 Compose 特有的mutableStateOf
或者mutableListStateOf
等来进行ReCompose
,UI 更新,所以当同时存在两者的时候,需要将
LiveData 转换成 Compose 中的 State 对象,然后才能在 Compose 中实现订阅功能。
Compose 库中提供了一个扩展函数来进行LiveData
和State
之间进行转换:
1、导入 runtime-livedata 库
implementation 'androidx.compose.runtime:runtime-livedata:1.2.0'
2、将 LiveData 数据转换成 State 数据
private val tittleLv = MutableLiveData("Android")
private fun initView() {
findViewById<ComposeView>(R.id.composeView).setContent {
val tittle by tittleLv.observeAsState()
Column {
Text(text = tittle.orEmpty(),Modifier.clickable {
tittleLv.value="测试LiveData转换State"
})
}
}
}
调用 observeAsState 扩展函数可以将LiveData
对象直接转换成State
对象,在 Compose 中使用。
上面代码给Text
加了个点击事件改变LiveData
数据,Compose 中的文本同步改变是成功的。
需要注意的是,observeAsState 函数只能在 Compose 方法中调用。
本文来自博客园,作者:mahy,转载请注明原文链接:https://www.cnblogs.com/mahongyin/p/16607149.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤