Compose+原生Fragment导航：如何处理BottomNavBar并嵌入Fragment到Scaffold

要在Compose的Scaffold里嵌入原生Fragment，核心是用AndroidView组件把原生View容器（比如FrameLayout）嵌入Compose，再通过原生的FragmentManager来管理Fragment的切换。结合你的代码，具体实现如下：

1. 调整状态与逻辑，统一管理导航与Fragment切换 #

把底部导航的选中状态提升到HomeScreen中，点击导航项时直接触发Fragment切换逻辑：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen() {
    var selectedItem by remember { mutableStateOf(0) }
    val bottomNavItems = listOf(
        BottomNavItem(name = "First Fragment"),
        BottomNavItem(name = "Second Fragment")
    )

    Scaffold(bottomBar = { 
        BottomNavBar(
            selectedItem = selectedItem,
            items = bottomNavItems,
            onItemClick = { selectedItem = it }
        ) 
    }) { paddingValues ->
        // 用AndroidView嵌入Fragment容器
        AndroidView(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues), // 适配Scaffold的内边距，避免内容被底部导航遮挡
            factory = { context ->
                // 创建FrameLayout作为Fragment的容器
                FrameLayout(context).apply {
                    id = View.generateViewId() // 给容器设置唯一ID，用于FragmentManager定位
                }
            },
            update = { container ->
                // 根据选中的导航项切换Fragment
                val fragmentManager = (context as FragmentActivity).supportFragmentManager
                val transaction = fragmentManager.beginTransaction()

                // 判断当前显示的Fragment，避免重复创建实例
                val currentFragment = fragmentManager.findFragmentById(container.id)
                when (selectedItem) {
                    0 -> {
                        if (currentFragment !is FirstFragment) {
                            transaction.replace(container.id, FirstFragment())
                        }
                    }
                    1 -> {
                        if (currentFragment !is SecondFragment) {
                            transaction.replace(container.id, SecondFragment())
                        }
                    }
                }
                transaction.commit()
            }
        )
    }
}

@Composable
fun BottomNavBar(
    selectedItem: Int,
    items: List<BottomNavItem>,
    onItemClick: (Int) -> Unit
) {
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                selected = selectedItem == index,
                onClick = { onItemClick(index) },
                label = { Text(item.name) }
            )
        }
    }
}

// 定义BottomNavItem数据类
data class BottomNavItem(val name: String)

// 示例原生Fragment
class FirstFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }
}

class SecondFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_second, container, false)
    }
}

2. 关键细节说明 #

• AndroidView的角色：作为Compose与原生View/Fragment的桥梁，factory方法负责创建原生容器View，update方法会在状态变化（比如选中项改变）时触发，用来更新Fragment。
• Fragment切换优化：通过判断当前显示的Fragment类型，避免重复实例化；如果需要保留Fragment状态，可以改用hide+show的方式管理，替代replace。
• 内边距适配：必须把Scaffold返回的paddingValues传给AndroidView，否则Fragment内容会被底部导航栏遮挡。

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