如何阻止屏幕在 Jetpack Compose 中重新合成？

Question

我有導航抽屜，其中有兩個項目：

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {},
    content = {
        Scaffold(
            topBar = {},
            content = { padding ->
                Box(
                    modifier = Modifier.fillMaxSize().padding(padding)
                ) {
                    when (viewModel.selectedItem) {
                        items[0] -> Home()
                        items[1] -> Products()
                    }
                }
            }
        )
    }
)

其中items是這樣初始化的列表：

val items = listOf(
    Item(Icons.Default.Home, "Home"),
    Item(Icons.Default.List, "Products")
)

並且selectedItem像這樣在 ViewModel 內部初始化

var selectedItem by mutableStateOf(items[0])

哪里， Home有這個內容：

fun Home() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        PopularProducts(
            popularProductsContent = { popularProducts ->
                HorizontalContent(
                    products = popularProducts
                )
            }
        )
    }
}

和Products這個：

fun Products(
    viewModel: MainViewModel = hiltViewModel(),
) {
    LaunchedEffect(Unit) {
        viewModel.getAllProducts()
    }
    Products { products ->
        Column {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                contentPadding = PaddingValues(8.dp)
            ) {
                items(products) { product ->
                    ProductCard(
                        product = product
                    )
                }
            }
        }
    }
}

當我啟動應用程序時，會加載Home項目。 如果我離開它，然后我回來，一切都很好，頁面沒有重新組合。 但是，如果我 select Products ，並且我導航到產品詳細信息，例如，當我導航返回時，屏幕會重新組合（它會閃爍）。 基本上提出了另一個請求。 我怎樣才能阻止這種情況發生？

PS 我使用 Hilt Navigation。

Answer 1

這是因為您的LaunchedEffect將再次被調用，這會觸發您的產品重新加載。

您只需要以某種方式緩存您的產品，這樣就不會發生重新加載和重置，隨着復雜性和架構的增加，有很多方法可以做到這一點，但最簡單的解決方法是在MainViewModel init中調用viewModel.getAllProducts()而不是具有LaunchedEffect 。