https://kotlinlang.org logo
#compose
Title
# compose
k

KotlinLeaner

10/19/2023, 11:22 AM
Hello 👋 , I want to change the ui on button click so I am using ui event. I tried some code and it's working fine. I want to check some variable value so I created a
LaunchEffect
to trigger and print the value in log. After using
LaunchEffect
my view is not changing anymore i.e. it stucks on same screen. I have one screen where I am using
HorizontalPager
and other screen just printing the value in
Text
.
SaveVariable
Copy code
@Composable
@OptIn(ExperimentalFoundationApi::class)
fun SaveVariable() {
    val viewModel = VariableViewModel()
    val pagerState = rememberPagerState()
    LaunchedEffect(key1 = pagerState) {
        snapshotFlow { pagerState.currentPage }.collect { page ->
            viewModel.currentIndex = page
        }
    }
//    this code is causing issue
//    LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
//        Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
//    }
    LgcTheme {
        SaveVariableItem(viewModel.currentIndex, viewModel.uiState, pagerState) {
            viewModel.changeUIi()
            viewModel.setLastCurrentPage = true
        }
    }
}
VariableViewModel
Copy code
class VariableViewModel : ViewModel() {
    var uiState by mutableStateOf(ScreenName.FIRST)
    var setLastCurrentPage by mutableStateOf(false)
    var currentIndex by mutableStateOf(0)
    fun changeUIi() {
        uiState = if (uiState == ScreenName.FIRST) {
            ScreenName.SECOND
        } else {
            ScreenName.FIRST
        }
    }
}
ScreenName
Copy code
enum class ScreenName {
    FIRST,
    SECOND
}
SaveVariableItem
Copy code
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SaveVariableItem(
    currentIndex: Int,
    uiState: ScreenName,
    pagerState: PagerState,
    changeUiState: () -> Unit,
) {
    Column {
        when (uiState) {
            ScreenName.FIRST -> {
                ScreenFirstView(pagerState)
            }

            ScreenName.SECOND -> {
                ScreenSecondView(currentIndex, "SECOND")
            }
        }
        Button(onClick = { changeUiState() }) {
            Text(text = "Add")
        }
    }
}
ScreenFirstView
Copy code
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ScreenFirstView(pagerState: PagerState) {
    Column(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        HorizontalPager(
            modifier = Modifier.padding(20.dp),
            pageCount = 10,
            state = pagerState
        ) { page ->
            Text(
                text = "Page: $page",
                modifier = Modifier.fillMaxWidth(),
                color = Color.White
            )
        }
    }
}
ScreenSecondView
Copy code
@Composable
fun ScreenSecondView(currentIndex: Int, screenImage: String) {
    Column(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        Text(text = "$currentIndex ==== $screenImage", color = Color.White)
    }
}
I don't understand why this piece of code is causing issue to unable to change the ui code
Copy code
LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
    Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
}
Please guide me what I am doing wrong in here. Thanks
c

Chrimaeon

10/19/2023, 3:29 PM
On ever composition of the
SaveVariable
you create a new view model. That might be the issue 😉