喷气背包撰写导航无限加载屏幕

Question

>我Navigation正在尝试使用单个活动和 多个Composable屏幕。

这是我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()
}
}
}

这是视图模型：

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

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

单击按钮时，将调用ViewModel并发出导航UiState...但是在加载下一个屏幕后，它会不断发出，这会导致无限的屏幕重新加载。应该怎么做才能避免这种情况？

Answer 1

我用 2 个屏幕、HomeScreen和SettingScreen重新实现了您发布的代码，并删除了UiState类的某些部分及其用法。

问题在于您的HomeScreen可组合性，而不是StateFlow排放。

你有这个mutableState

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

这是在执行navigation回调的when块之一中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() 作为回调的一部分，而不是作为一部分 可组合物本身，以避免在每个 重组。

但在您的情况下，navigation是由观察到的mutableState触发的，并且mutableState是可组合HomeScreen的一部分。

似乎当navController执行导航并且NavHost是Composable

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

它将执行一个re-composition，因为它，它将再次调用HomeScreen(HomeScreen 未re-composed，其状态保持不变)，并且由于HomeScreen'sUiState值仍设置为Navigate，它满足when块，再次触发回调进行导航，并NavHostre-composes， 然后创建一个无限循环。

我所做的(而且非常丑陋)是我在 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，防止循环。

我很难猜到你的组合实现结构，但我通常不会混合我的一次性事件操作和 UiState，相反，我有一个单独的UiEvent密封类，它将对"一次性"事件进行分组，如下所示：

• 小吃店
• 吐司
• 导航

并将它们作为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)
}
}
}
}

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

也看看这个S.O帖子，类似于你的情况