前言
Compose
正式发布1.0已经相当一段时间了,但相信很多同学对Compose
还是有很多迷惑的地方
Compose
跟原生的View
到底是什么关系?是跟Flutter
一样完全基于Skia
引擎渲染,还是说还是View
的那老一套?
相信很多同学都会有下面的疑问
下面我们就一起来看下下面这个问题
现象分析
我们先看这样一个简单布局
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
然后我们打开开发者选项中的显示布局边界
,效果如下图所示:
我们可以看到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
的容器,我们后面再分析,这里先给出结论
Compose
在渲染时并不会转化成View
,