Jetpack Compose 完全脱离 View 系统了吗?

最新推荐文章于 2025-05-05 21:05:17 发布

原创

最新推荐文章于 2025-05-05 21:05:17 发布 · 697 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #微信 #jetpack #compose

本文探讨了Jetpack Compose是否完全脱离了Android View系统的问题。通过现象和原理分析，揭示Compose在渲染时并非转化为View，而是通过一个ComposeView入口，布局和绘制主要在Compose自身引擎上完成，但仍依赖于View系统的一部分功能。同时，文章指出Compose通过良好的分层设计实现了跨平台能力。

前言

Compose正式发布1.0已经相当一段时间了，但相信很多同学对Compose还是有很多迷惑的地方
Compose跟原生的View到底是什么关系？是跟Flutter一样完全基于Skia引擎渲染，还是说还是View的那老一套?
相信很多同学都会有下面的疑问

[图片上传失败...(image-211dc7-1634021553449)]

下面我们就一起来看下下面这个问题

现象分析

我们先看这样一个简单布局

class TestActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setContent {        	
        	ComposeBody()              
        }
    }
}

@Composable
fun ComposeBody() {
    Column {
        Text(text = "这是一行测试数据", color = Color.Black, style = MaterialTheme.typography.h6)
        Row() {
            Text(text = "测试数据1!", color = Color.Black, style = MaterialTheme.typography.h6)
            Text(text = "测试数据2!", color = Color.Black, style = MaterialTheme.typography.h6)
        }
    }
}

如上所示，就是一个简单的布局，包含Column,Row与Text
然后我们打开开发者选项中的显示布局边界，效果如下图所示：

[图片上传失败...(image-9a3cb4-1634021553449)]

我们可以看到Compose的组件显示了布局边界，我们知道，Flutter与WebView H5内的组件都是不会显示布局边界的，难道Compose的布局渲染其实还是View的那一套?

我们下面再在onResume时尝试遍历一下View的层级,看一下Compose到底会不会转化成View

    override fun onResume() {
        super.onResume()
        window.decorView.postDelayed({
            (window.decorView as? ViewGroup)?.let { transverse(it, 1) }
        }, 2000)
    }

    private fun transverse(view: View, index: Int) {
        Log.e("debug", "第${index}层：" + view)
        if (view is ViewGroup) {
            view.children.forEach { transverse(it, index + 1) }
        }
    }

通过以上方式打印页面的层级，输出结果如下：

E/debug: 第1层：DecorView@c2f703f[RallyActivity]
E/debug: 第2层：android.widget.LinearLayout{4202d0c V.E...... ........ 0,0-1080,2340}
E/debug: 第3层：android.view.ViewStub{2b50655 G.E...... ......I. 0,0-0,0 #10201b1 android:id/action_mode_bar_stub}
E/debug: 第3层：android.widget.FrameLayout{9bfc86a V.E...... ........ 0,90-1080,2340 #1020002 android:id/content}
E/debug: 第4层：androidx.compose.ui.platform.ComposeView{1b4d15b V.E...... ........ 0,0-1080,2250}
E/debug: 第5层：androidx.compose.ui.platform.AndroidComposeView{a8ec543 VFED..... ........ 0,0-1080,2250}

如上所示，我们写的Column,Row,Text并没有出现在布局层级中，跟Compose相关的只有ComposeView与AndroidComposeView两个View
而ComposeView与AndroidComposeView都是在setContent时添加进去的Compose的容器，我们后面再分析，这里先给出结论