How can I launch recomposition when a specified Flow changed in Jetpack Compose? - kotlin

Question

I know the Column(){...} will be recomposition when either b1 or b2 is changed.
If I hope that Column(){...} can be re-composed only when b2 is changed and Column(){...} doesn't be recomposed when b1 is changed, how can I do?
#Composable
fun ScreenDetail(
mViewMode: SoundViewModel
) {
val b1=mViewMode.a1.collectAsState(initial = 0)
val b2=mViewMode.a2.collectAsState(initial = 0)
Column() {
Text(" ${b1.value} ${b2.value}")
Text(Calendar.getInstance().time.toSeconds())
}
}
fun Date.toSeconds():String{
return SimpleDateFormat("yyyy/MM/dd HH:mm:ss", Locale.US).format(this)
}
class SoundViewModel(): ViewModel() {
var i = 0
val a1: Flow<Int> = flow {
while (true) {
emit(i++)
delay(1000)
}
}
val a2: Flow<Int> = flow {
while (true) {
emit(i)
delay(2000)
}
}
}

Answer 1

You need to create scopes if you need to have scoped recompositions. By scopes i mean creating a Composable that is not inline unlike Column, Row or Box. You can check answer and articles in this link.
Compose recomposes closest scope/function that States are read. If you read
Text(" ${b1.value} ${b2.value}")
your Column will be recomposed when any of these states changes. But as mentioned above even if you read any of the they should have changed because Column doesn't create a scope
#Composable
fun ScreenDetail2(
mViewMode: SoundViewModel
) {
val b1=mViewMode.a1.collectAsState(initial = 0)
val b2=mViewMode.a2.collectAsState(initial = 0)
Column(modifier= Modifier.background(getRandomColor()).fillMaxWidth()) {
Text("${b1.value}")
}
Column(modifier= Modifier.background(getRandomColor()).fillMaxWidth()) {
Text("${b2.value}")
}
}
But if you create a function such as
#Composable
private fun MyColumn(counter:Int){
Column(modifier= Modifier.background(getRandomColor()).fillMaxWidth()) {
Text("$counter")
}
}
you will be having scopes for each value you read
#Composable
fun ScreenDetail3(
mViewMode: SoundViewModel
) {
val b1=mViewMode.a1.collectAsState(initial = 0)
val b2=mViewMode.a2.collectAsState(initial = 0)
MyColumn(b1.value)
MyColumn(b2.value)
}
As you can see in the gif ScreenDetail2 recomposes each Column when b1 or b2 changes but ScreenDetail3 only recomposes respective scope of function. I changed delay time of b1 to 300 and b2 to 2000 to make recomposition easy to observe visually.
2 tolumns on top is from ScreenDetail2, and the bottom is from ScreenDetail3
Recomposition can be observer in many ways, i add 2
class Ref(var value: Int)
// Note the inline function below which ensures that this function is essentially
// copied at the call site to ensure that its logging only recompositions from the
// original call site.
#Composable
inline fun LogCompositions(msg: String) {
val ref = remember { Ref(0) }
SideEffect { ref.value++ }
println("$msg, recomposition: ${ref.value}")
}
or changing colors
fun getRandomColor() = Color(
red = Random.nextInt(256),
green = Random.nextInt(256),
blue = Random.nextInt(256),
alpha = 255
)