When does recomposition occur?
I’m using an IconToggleButton to create a single-choice list, and the variable that tracks whether an item is selected is var choiceChecked: Pair<Int, MutableState>? = null. This variable stores the index of the selected item and its selected state.
When I click a button outside the list and print choiceChecked.first, it prints the correct value. It seems that even though choiceChecked doesn't use remember and MutableState, it can still retain its value after recomposition.
However, when I turn off the screen and turn it back on, the value of choiceChecked is lost. I speculate that the reason is that after selecting an item, choiceChecked recorded the value during that recomposition. Later, when I click the button to print choiceChecked.first, no recomposition occurs because the state hasn't changed, so it prints the correct value.
But when I turn off the screen and turn it back on, recomposition happens, and choiceChecked is lost. Is this correct?
Below is my code,Please forgive me for posting such long code, as I am unsure if other variables might affect recomposition. The code block that prints choiceChecked is commented with 'print the choiceChecked'. The code for selecting the item is inside the clickable. Please search for clickable.
@Composable
fun AlbumGrouping(
showPopup: MutableState<Boolean>,
isPopupVisible: MutableState<Boolean>,
size: DpSize,
application: MediaApplication,
directoryIcon: Bitmap,
) {
val width = remember { (size.width.value * 0.9f).dp }
val height = remember { (size.height.value * 0.6f).dp }
val density = LocalDensity.current
//加载数据
val scope = rememberCoroutineScope()
val items: SnapshotStateList<Album> = remember { mutableStateListOf() }
var queryJob by remember { mutableStateOf<Job?>(null) }
var addJob by remember { mutableStateOf<Job?>(null) }
val gridState = rememberLazyGridState()
//控制显示
val transition = updateTransition(targetState = showPopup.value, label = "popup")
val alpha by transition.animateFloat(
label = "popupOffset",
transitionSpec = { tween(durationMillis = 500) }
) { state -> if (state) 1f else 0f }
// 监听 showPopup 的变化，管理 Popup 显示状态
LaunchedEffect(showPopup.value) {
queryJob?.cancelAndJoin()
if (showPopup.value) {
queryJob = scope.launch(Dispatchers.IO) {
val result = application.mediaDatabase.albumDao.queryByParentId(-1)
if (result != null) items.addAll(result)
}
isPopupVisible.value = true
} else {
delay(500)
isPopupVisible.value = false
queryJob?.cancel()
}
}
var choiceChecked: Pair<Int, MutableState<Boolean>>? = null
if (isPopupVisible.value) {
Popup(
alignment = Alignment.TopCenter,
onDismissRequest = {
showPopup.value = false
},
properties = PopupProperties(focusable = true)
) {
Column(
modifier = Modifier
.size(width, height)
.graphicsLayer(alpha = alpha)
.background(Color(0xE6FFFFFF), shape = RoundedCornerShape(16.dp))
) {
LazyVerticalGrid(
state = gridState,
columns = GridCells.Fixed(3),
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.padding(16.dp)
) {
items(items.size) { index ->
items[index].let { item ->
val checked = remember { mutableStateOf(false) }
Box(
contentAlignment = Alignment.TopEnd,
modifier = Modifier
.padding(end = TinyPadding, top = TinyPadding)
.clickable {
if (checked.value) {
checked.value = false
} else {
choiceChecked?.second?.value = false
choiceChecked = index to checked
checked.value = true
}
}
) {
Column {
DisplayImage(
bitmap = directoryIcon,
context = application.baseContext,
modifier = Modifier.aspectRatio(1f)
)
Text(
text = item.name,
style = MaterialTheme.typography.labelMedium,
modifier = Modifier.padding(start = SmallPadding)
)
}
IconToggleButton(
checked = checked.value,
colors = IconButtonDefaults.iconToggleButtonColors(
containerColor = Color(0x80808080), // 选中时图标的颜色
contentColor = Color.White, // 未选中时图标的颜色
checkedContainerColor = Color.White, // 选中时背景颜色
checkedContentColor = Color.DarkGray // 未选中时背景颜色
),
onCheckedChange = {
if (checked.value) {
checked.value = false
} else {
choiceChecked?.second?.value = false
choiceChecked = index to checked
checked.value = true
}
},
modifier = Modifier
.width(24.dp)
.height(24.dp)
.offset(x = (-10).dp, y = 10.dp)
) {
if (checked.value) {
Icon(
Icons.Filled.CheckCircle,
contentDescription = "选中",
modifier = Modifier
.fillMaxSize()
.padding(0.dp)
)
} else {
Icon(
Icons.Filled.RadioButtonUnchecked,
contentDescription = "未选中",
modifier = Modifier
.fillMaxSize()
.padding(0.dp)
)
}
}
}
}
}
}
val driver = remember { mutableStateOf(0.dp) }
Row(
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth()
.onGloballyPositioned { layout ->
with(density) {
driver.value = layout.size.height.toDp()
}
}
.background(Color(0xE6D3D3D3), shape = RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp))
) {
TextButton(onClick = { //print the choiceChecked
println("index${choiceChecked?.first}")
}) {
Text(stringResource(R.string.popup_select_grouping))
}
Text(
"", modifier = Modifier
.width(1.dp)
.height(driver.value)
.background(Color(0xE6FFFFFF))
)
TextButton(onClick = {
scope.launch(Dispatchers.IO) {
addJob?.join()
addJob = scope.launch {
val groupingNum = items.size
val album = Album(name = "分组${groupingNum + 1}")
application.mediaDatabase.albumDao.insert(album)
items.add(album)
}
}
}) {
Text(stringResource(R.string.popup_add_grouping))
}
}
}
}
}
}
I made a smaller sample to support my answer:
@Composable
fun RecompositionDemo() {
val context = LocalContext.current
var choiceChecked = 1
Column {
OutlinedButton(
onClick = {
choiceChecked++
}
) {
Text("INCREASE")
}
OutlinedButton(
onClick = {
Toast.makeText(context, "choiceChecked = $choiceChecked", Toast.LENGTH_SHORT).show()
}
) {
Text("PRINT")
}
Text("choiceChecked = $choiceChecked")
}
}
While execution, pay close attention to a) the choiceChecked value shown by the Toast and b) the choiceChecked value shown by the Text Composable:
What we can observe is
- the
Toastinitially displayschoiceChecked = 1 - then we click the INCREASE
OutlinedButton - the
Textdoes not update to show the new value - the
Toasthowever will correctly showchoiceChecked = 2 - after locking and unlocking the device, a recomposition happens which resets
choiceChecked = 1
But when I turn off the screen and turn it back on, recomposition happens, and choiceChecked is lost. Is this correct?
This is correct.
When I click a button outside the list and print choiceChecked.first, it prints the correct value. It seems that even though choiceChecked doesn't use remember and MutableState, it can still retain its value after recomposition.
That is not correct. The reason while the Toast prints the correct choiceChecked values is because there is no recomposition triggered in the first place when doing choiceChecked++, and thus the value is not reset. At the same time, as no recomposition is happening, the Text Composable is not updating.
Jetpack Compose can only detect changes on MutableState variables, that's why we use mutableStateOf to make sure the UI gets recomposed when a variable value changes. Additionally, we use remember so that any new value set to a variable survives the recomposition.
- How to create MSI file with Compose Desktop
- No recomposition called when State Holder class modified
- How to deal with Compose Desktop MenuBar
- Android compose: offset at a fraction of parent size
- Back press handler in ModalBottomSheet in Compose M3 1.1
- Support configuration change with MutableTransitionState
- When does recomposition occur?
- How to implement a scrolling behavior in Jetpack Compose similar to YouTube's channel UI?
- Android Jetpack Compose: How to show styled Text from string resources
- How to update arraylist in jetpack compose
- TopAppBar has unknown padding when using nested Scaffold with Compose Navigation
- java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 Error in Kotlin
- Room DB is Destroyed When App Restarts in Android 15 Pixel 9
- Activity RESULT_OK never seems to happen
- How to successfully save data to another database column in postgresql using jetpack compose?
- How do you detect if the user has clicked outside of a composable using Jetpack Compose?
- Rendering PDF Jetpack Compose
- Missing material icons in Android Jetpack Compose
- Setting 3D model's pose in Scene Viewer for Android XR app
- Create a music playing bars animation on Compose
- What is the difference between "remember" and "mutableState" in android jetpack compose?
- How Can I Call Another Composable within an Item in a Lazy Column with Animation?
- Android Jetpack Compose call view-model function only once
- Jetpack Compose TopAppBar with search bar embedded
- Coil didn't Loading Network Images in Jetpack Compose | Solution
- Why .animateEnterExit() modifier is working in one case but not in other?
- How to Control the Scroll Speed of LazyVerticalGrid
- How to communicate between Composables in Jetpack Compose
- The compose compiler plugin you are using (version 1.0.1) expects a minimum runtime version of 1.0.1
- How to animate button width changes smoothly when showing/hiding another button in Jetpack Compose?