iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >AndroidView与Compose框架交互实现介绍
  • 194
分享到

AndroidView与Compose框架交互实现介绍

2024-04-02 19:04:59 194人浏览 薄情痞子
摘要

目录1、在ComposeUI中加载AndroidView控件2、在AndroidView中加载ComposeUI3、LiveData数据转换成State数据1、在ComposeUI中

1、在ComposeUI中加载AndroidView控件

Compose中可以加载AndroidView还是比较简单的,直接引入AndroidView来加载AndroidView布局文件。

@Composable
fun Greeting(name: String) {
    Column {
        Text(text = "Hello $name!")
        LoadAndroidView(name)
    }
}

@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交互,将会可能涉及到LiveDataState数据的交换问题。

由于在AndroidView中常用LiveData来进行数据的订阅,而在Compose中使用的是Compose特有的mutableStateOf或者mutableListStateOf等来进行ReCompose ,UI更新,所以当同时存在两者的时候,需要将

LiveData转换成Compose中的State对象,然后才能在Compose中实现订阅功能。

Compose库中提供了一个扩展函数来进行LiveDataState之间进行转换:

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方法中调用。

到此这篇关于AndroidView与Compose交互实现介绍的文章就介绍到这了,更多相关AndroidView Compose内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: AndroidView与Compose框架交互实现介绍

本文链接: https://www.lsjlt.com/news/166966.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AndroidView与Compose框架交互实现介绍
    目录1、在ComposeUI中加载AndroidView控件2、在AndroidView中加载ComposeUI3、LiveData数据转换成State数据1、在ComposeUI中...
    99+
    2024-04-02
  • AndroidView与Compose互相调用实例探究
    目录1. 前言2. Android传统View调用Compose2.1 新建传统View体系的Android项目2.2 项目添加Compose配置2.2.1 在android代码块添...
    99+
    2023-01-30
    Android View与Compose互相调用 Android View与Compose
  • C++与QML进行数据交互实现方式介绍
    目录一、定义可交互的类二、数据操作类三、注册四、qml调用我所使用的方式,是通过C++调用远端的webservice,再次数据送到qml端,不说原理了,直接上代码的实现过程。需要明白...
    99+
    2024-04-02
  • Flask框架之数据交互的实现
    目录1 使用Flask处理表单1.1 使用Flask处理通用表单1.2 使用Flask-WTF处理表单2 使用Flask上传文件3 Cookie的使用3.1 Cookie的基本概念3...
    99+
    2024-04-02
  • Clouda框架介绍与应用场景
    Clouda是一个基于浏览器运行的前端应用开发框架。它提供了一套完整的开发工具和资源,可以帮助开发者快速构建跨平台的Web应用。Cl...
    99+
    2023-08-23
    Clouda
  • Python常用Web框架Django、Flask与Tornado介绍
    web框架是什么 web开发框架是一组工具,同时也提供了非常多的资源,供软件开发人员构建和管理网站、提供web服务、编写web应用程序。它是一个抽象工具,能使开发应用程序和重复使用代...
    99+
    2024-04-02
  • golang与pgsql交互的实现
    目录1、目的2、代码架构3、代码展示1、目的 通过读取配置文件获取pgsql用户名和密码及数据库和数据表,从而读取所需字段值。 2、代码架构 config/config.go:读取...
    99+
    2023-03-19
    golang pgsql交互 golang pgsql
  • Cordova插件中JavaScript代码与Java的交互细节介绍
    在Cordova官网中有这么一张架构图:大家看右下角蓝色的矩形框"Custom Plugin"——自定义插件。意思就是如果您用Cordova打包Mobile应用时,发现您的移动应用里需要使用一些功能,这些功能用普通的Ja...
    99+
    2023-06-05
  • Flask框架运用Axios库实现前后端交互详解
    Axios 是一个基于promise的HTTP库,该库是一个更好的替代ajax向后端发送数据或请求数据的前端组件库,其本质上也是对原生XHR的封装,只不过它是Promise的实现版本...
    99+
    2022-12-22
    Flask Axios前后端交互 Flask 前后端交互 Flask Axios
  • pytorch框架的详细介绍与应用详解
    目录pytorch框架的详细介绍与应用一.pytorch概述1.pytorch概念2.pytorch与tensorflow的区别3.pytorch包含的内容二.pytorch常用模块...
    99+
    2023-05-15
    pytorch框架介绍 pytorch框架应用
  • C#定时任务框架Quartz.NET介绍与用法
    什么是定时任务? 最近恰巧有类似的需求, 需要做一个应用程序服务, 每天定时给服务器上传采集的数据。 在没有任务框架的使用前提下, 如果我们想要实现类似的需求,可以自己写一个计时器,...
    99+
    2024-04-02
  • Golang函数式编程库与框架的介绍
    go语言提供了丰富的函数式编程库和框架,包括数据处理(filter)、压缩(snappy)、数据分析(gota),以及函数式工具(functional)、依赖注入(fx)和分布式跟踪(o...
    99+
    2024-04-14
    golang 函数式编程 git go语言
  • Python的Web框架Django介绍与安装方法
    简介 Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django 是一个开放源代码的 Web 应...
    99+
    2024-04-02
  • Flask框架运用Ajax实现数据交互的示例代码
    目录前后端发送字符串前后端发送JSON数据发送数据并携带token收发JSON格式字符串使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得...
    99+
    2022-11-13
    Flask Ajax数据交互 Flask Ajax数据 Flask 数据交互 Flask Ajax
  • JavaScript与HTML怎么实现交互
    这篇文章主要介绍“JavaScript与HTML怎么实现交互”,在日常操作中,相信很多人在JavaScript与HTML怎么实现交互问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • PHP与Javascript怎么实现交互
    PHP与Javascript怎么实现交互,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。PHP与Javascript交互的方法:通过Cookie交互。一共是三个文件,分别为:...
    99+
    2023-06-17
  • golang与pgsql交互如何实现
    本文小编为大家详细介绍“golang与pgsql交互如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“golang与pgsql交互如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1、目的通过读取配置文...
    99+
    2023-07-05
  • QML与C++交互的实现步骤
    目录前言第一个例子:QML中创建C++对象第二个例子:C++中加载QML对象参考前言 文档如是说,QML旨在通过C ++代码轻松扩展。Qt QML模块中的类使QML对象能够从C ++...
    99+
    2024-04-02
  • QT与javascript交互数据的实现
    一、数据从QT流向JS 1、QT调用JS的函数,JS通过形参获得QT的值 2、JS调用QT的函数,QT函数的返回值进入JS 二、数据从JS流向QT 1、JS调用QT的函数,QT通过形...
    99+
    2024-04-02
  • iframe与主框架跨域如何实现相互访问
    这篇文章给大家分享的是有关iframe与主框架跨域如何实现相互访问的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.同域相互访问假设A.html 与 b.html domain都...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作