Fragment托管Compose时，实现从Compose导航至Fragment的方案

方案1：向Composable传递导航回调 #

在承载Compose的SignInFragment中定义导航逻辑，通过lambda参数传递给SignInScreen，让Compose触发回调完成导航。

修改步骤： #

1. 调整SignInScreen参数，添加导航回调：

@Composable
fun SignInScreen(
    authViewModel: AuthViewModel = viewModel(),
    onNavigateToHome: () -> Unit // 添加导航回调参数
) {
    val authState by authViewModel.authState.collectAsState()

    // 原有生命周期监听逻辑保持不变

    if(authState is AuthUIState.LoginSuccess) {
        onNavigateToHome() // 触发导航回调
    }

    Button(
        onClick = { authViewModel.signIn() },
    ) {
        Text("SignIn")
    }
}

2. 在SignInFragment中传入回调，执行原有导航逻辑：

class SignInFragment : BaseFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val composeView = ComposeView(requireContext())
        composeView.apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                SignInScreen(
                    onNavigateToHome = {
                        findNavController().navigate(SignInFragmentDirections.actionSignInFragmentToHomeFragment())
                    }
                )
            }
        }
        return composeView
    }
}

方案2：在Compose中直接获取ViewTreeNavController #

利用Compose的LocalView获取当前View，通过Navigation.findNavController()拿到Fragment的NavController，直接在Compose内完成导航。

修改navigateToDashboard()相关逻辑： #

@Composable
fun SignInScreen(authViewModel: AuthViewModel = viewModel()) {
    val authState by authViewModel.authState.collectAsState()
    val currentView = LocalView.current // 获取当前Compose对应的View

    // 原有生命周期监听逻辑保持不变

    if(authState is AuthUIState.LoginSuccess) {
        navigateToDashboard(currentView)
    }

    Button(
        onClick = { authViewModel.signIn() },
    ) {
        Text("SignIn")
    }
}

fun navigateToDashboard(view: View) {
    // 通过View获取NavController并执行导航
    Navigation.findNavController(view).navigate(SignInFragmentDirections.actionSignInFragmentToHomeFragment())
}

这个方案无需修改Fragment代码，直接在Compose内部完成导航，适合不想额外传递参数的场景。

方案3：通过ViewModel共享导航事件 #

用一次性事件封装导航指令，ViewModel负责发送事件，Fragment监听事件并执行导航，解耦性更强，适合复杂状态流转场景。

1. 定义一次性事件类： #

open class Event<out T>(private val content: T) {
    var hasBeenHandled = false
        private set

    fun getContentIfNotHandled(): T? {
        return if (hasBeenHandled) {
            null
        } else {
            hasBeenHandled = true
            content
        }
    }
}

2. 修改AuthViewModel，添加导航事件： #

class AuthViewModel : ViewModel() {
    private val _navigateEvent = MutableLiveData<Event<Unit>>()
    val navigateEvent: LiveData<Event<Unit>> = _navigateEvent

    // 原有checkAuthorized、signIn逻辑保持不变

    fun triggerNavigateToHome() {
        _navigateEvent.value = Event(Unit)
    }
}

3. 在SignInFragment中监听导航事件： #

class SignInFragment : BaseFragment() {
    private lateinit var authViewModel: AuthViewModel

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        authViewModel = ViewModelProvider(this)[AuthViewModel::class.java]
        // 监听导航事件，确保只处理一次
        authViewModel.navigateEvent.observe(viewLifecycleOwner) { event ->
            event.getContentIfNotHandled()?.let {
                findNavController().navigate(SignInFragmentDirections.actionSignInFragmentToHomeFragment())
            }
        }

        val composeView = ComposeView(requireContext())
        composeView.apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                SignInScreen(authViewModel = authViewModel)
            }
        }
        return composeView
    }
}

4. 在SignInScreen中触发导航事件： #

@Composable
fun SignInScreen(authViewModel: AuthViewModel = viewModel()) {
    val authState by authViewModel.authState.collectAsState()

    // 原有生命周期监听逻辑保持不变

    if(authState is AuthUIState.LoginSuccess) {
        authViewModel.triggerNavigateToHome()
    }

    Button(
        onClick = { authViewModel.signIn() },
    ) {
        Text("SignIn")
    }
}

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