Fragment嵌入Jetpack Compose触发Cannot add views to ComposeView错误如何解决

报错原因 #

报错Cannot add views to ComposeView; only Compose content is supported的核心触发逻辑是：你在MainActivity中将Fragment实例塞进了ComposeView容器中。ComposeView是Jetpack Compose专属的内容容器，仅支持通过setContent方法传入可组合项，不允许添加传统View体系的控件、Fragment这类内容。

同时你的代码还存在一处逻辑错误：ComposeFragment的onCreateView中加载了Activity的布局R.layout.activity_main，Fragment应该加载自身专属的布局，不要复用Activity的布局。

修复方案 #

方案1：保留现有XML混合Compose的写法 #

第一步：修改MainActivity的Fragment事务

将Fragment挂载到专门的Fragment容器上，不要挂载到ComposeView：

open class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportFragmentManager.beginTransaction()
            // 替换为FragmentContainerView的id
            .replace(R.id.main_container, ComposeFragment())
            .commit()
    }
}

第二步：修改ComposeFragment的布局加载逻辑

新建Fragment专属布局fragment_compose.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.compose.ui.platform.ComposeView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

修改ComposeFragment的onCreateView代码，加载Fragment自己的布局：

class ComposeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_compose, container, false)
        view.findViewById<ComposeView>(R.id.compose_view).setContent {
            Column(
                modifier = Modifier
                    .border(border = BorderStroke(1.dp, Color.Black))
                    .padding(16.dp)
            ) {
                Text("THIS IS A COMPOSABLE INSIDE THE FRAGMENT XML")
                Spacer(modifier = Modifier.padding(10.dp))
                CircularProgressIndicator()
                Spacer(modifier = Modifier.padding(10.dp))
                Text("NEAT")
                Spacer(modifier = Modifier.padding(10.dp))
            }
        }
        return view
    }
}

方案2：纯Compose写法（无需额外创建Fragment布局XML） #

直接在ComposeFragment中创建ComposeView返回，省略布局文件步骤，修改后的Fragment代码如下：

class ComposeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Column(
                    modifier = Modifier
                        .border(border = BorderStroke(1.dp, Color.Black))
                        .padding(16.dp)
                ) {
                    Text("THIS IS A COMPOSABLE INSIDE THE FRAGMENT XML")
                    Spacer(modifier = Modifier.padding(10.dp))
                    CircularProgressIndicator()
                    Spacer(modifier = Modifier.padding(10.dp))
                    Text("NEAT")
                    Spacer(modifier = Modifier.padding(10.dp))
                }
            }
        }
    }
}

MainActivity的修改逻辑和方案1一致，将Fragment挂载到R.id.main_container容器即可。

内容的提问来源于stack exchange，提问作者petestmart