Jetpack Compose导航加载屏幕无限。

Question

我正试图使用单一活动和多个Composable屏幕来实现Navigation。

这是我的NavHost：

@Composable
@ExperimentalFoundationApi
fun MyNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
    startDestination: String = HOME.route,
    viewModelProvider: ViewModelProvider,
    speech: SpeechHelper
) = NavHost(
    modifier = modifier,
    navController = navController,
    startDestination = startDestination
) {
    composable(route = HOME.route) {
        with(viewModelProvider[HomeViewModel::class.java]) {
            HomeScreen(
                speech = speech,
                viewModel = this,
                modifier = Modifier.onKeyEvent { handleKeyEvent(it, this) }
            ) {
                navController.navigateTo(it)
            }
        }
    }

    composable(route = Destination.VOLUME_SETTINGS.route) {
        VolumeSettingsScreen(
            viewModelProvider[VolumeSettingsViewModel::class.java]
        ) { navController.navigateUp() }
    }
}

fun NavHostController.navigateTo(
    navigateRoute: String,
    willGoBackTo: String = HOME.route
): Unit = navigate(navigateRoute) {
    popUpTo(willGoBackTo) { inclusive = true }
}

我的屏幕看起来像这样：

@Composable
fun HomeScreen(
    speech: SpeechHelper,
    viewModel: HomeViewModel,
    modifier: Modifier,
    onNavigationRequested: (String) -> Unit
) {

    MyBlindAssistantTheme {
        val requester = remember { FocusRequester() }
        val uiState by viewModel.uiState.collectAsStateWithLifecycle(
            initialValue = UiState.Speak(
                R.string.welcome_
                    .withStrResPlaceholder(R.string.text_home_screen)
                    .toSpeechUiModel()
            )
        )

        uiState?.let {
            when (it) {
                is UiState.Speak -> speech.speak(it.speechUiModel)
                is UiState.SpeakRes -> speech.speak(it.speechResUiModel.speechUiModel())
                is UiState.Navigate -> onNavigationRequested(it.route) 
            }
        }

        Column(
            modifier
                .focusRequester(requester)
                .focusable(true)
                .fillMaxSize()
        ) {
            val rowModifier = Modifier.weight(1f)

            Row(rowModifier) {...}
                   
        }

        LaunchedEffect(Unit) {
            requester.requestFocus()
        }
    }
}

这是ViewModel：

class HomeViewModel : ViewModel() {
    private val mutableUiState: MutableStateFlow<UiState?> = MutableStateFlow(null)
    val uiState = mutableUiState.asStateFlow()

    
    fun onNavigateButtonClicked(){
        mutableUiState.tryEmit(Destination.VOLUME_SETTINGS.route.toNavigationState())
    }
}

当按钮被点击时，会调用ViewModel并发出NavigateUiState信号...但在下一个屏幕加载后，它仍然会不断地发出信号，导致无限屏幕重新加载。为避免这种情况应该怎么做？

- MeLean

Answer 1

我使用两个界面重新实现了你发布的代码，分别是主屏幕（HomeScreen）和设置屏幕（SettingScreen），并删除了UiState类及其用法的某些部分。

问题出在你的主屏幕（HomeScreen）可组合项中，而不是在StateFlow的发射中。

你有这个mutableState

val uiState by viewModel.uiState.collectAsStateWithLifecycle(
      initialValue = UiState.Speak
)

这是在你的一个when块中触发了一个navigation回调，正在被observed的内容。

uiState?.let {
         when (it) {
             is UiState.Navigate ->  {
                  onNavigationRequested(it.route)
             }
             UiState.Speak -> {
                 Log.d("UiState", "Speaking....")
            }
}

当调用您的ViewModel函数时

 fun onNavigateButtonClicked(){
        mutableUiState.tryEmit(UiState.Navigate(Destination.SETTINGS_SCREEN.route))
 }

这段代码将会更新 uiState 的值为 Navigate，被HomeScreen所观察，满足 when 块后触发导航回调进入下一个屏幕。

现在根据官方文档，

你只应该在回调中调用 navigate()，而不是在 Composable 本身中调用 navigate()，以避免在每次重新组合时都调用 navigate()。

但在你的情况下，navigation 是由被观察的 mutableState 触发的，而 mutableState 是你的 HomeScreen Composable 的一部分。

似乎当 navController 执行导航且 NavHost 为 Composable 时

@Composable
public fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit
) { ... }

由于它将执行重新组合，因此它将再次调用HomeScreen（HomeScreen没有被重新组合，其状态保持不变），并且因为HomeScreen的UiState值仍设置为Navigate，它满足了when块，再次触发导航回调，并且NavHost重新组合，然后创建了一个无限循环。

我所做的事情（非常丑陋）是在viewModel中创建了一个boolean标志，使用它来有条件地包装回调，

uiState?.let {
            when (it) {
                is UiState.Navigate  ->  {
                    if (!viewModel.navigated) {
                        onNavigationRequested(it.route)
                        viewModel.navigated = true
                    } else {
                        // dirty empty else 
                    }
                }
                UiState.Speak -> {
                    Log.d("UiState", "Speaking....")
                }
            }
        }

并在之后将其设置为true，从而防止出现循环。

我几乎猜不到你的compose实现结构，但通常我不会将一次性事件操作和UiState混合在一起，相反，我会有一个单独的UiEvent密封类，将如下的"一次性"事件分组：

• Snackbar
• Toast
• 导航(Navigation)

并将它们作为SharedFlow发出，因为这些事件不需要任何初始状态或初始值。

进一步来说，我创建了这个类

sealed class UiEvent {
    data class Navigate(val route: String) : UiEvent()
}

在这种情况下，在ViewModel中将其用作类型（如Navigate）。

 private val _event : MutableSharedFlow<UiEvent> = MutableSharedFlow()
 val event = _event.asSharedFlow()

 fun onNavigateButtonClicked(){
        viewModelScope.launch {
            _event.emit(UiEvent.Navigate(Destination.SETTINGS_SCREEN.route))
        }
    }

你可以通过LaunchedEffect在HomeScreen中观察它，从而同时在没有绑定到任何观察状态的回调函数的情况下触发其中的导航。

LaunchedEffect(Unit) {
        viewModel.event.collectLatest {
            when (it) {
                is UiEvent.Navigate -> {
                    onNavigationRequested(it.route)
                }
            }
        }
    }

这种方法不会引入无限导航循环，也不再需要脏布尔检查。

还可以查看此Stack Overflow帖子，与您的情况类似

- z.g.y