Kotlin compose compositionlocalof and staticcompositionlocalof

Kotlin Compose Implicit parameters CompositionLocalProvider_ Ango Mobile Blog -CSDN Blog

Kotlin Compose Customize CompositionLocalProvider CompositionLocal_ Ango Mobile Blog -CSDN Blog

After learning the above two blog knowledge .

You'll find that .

LocalContext.current

Pointing to

  Sometimes you may encounter

staticCompositionLocalOf 

compositionLocalOf

Two different constructs of numerical Provider 

The difference is

staticCompositionLocalOf  All components will be redrawn 

and  

compositionLocalOf  Redrawing will only be done for a single component 

Example code

package com.anguomob.jecpack.activity.compose.composition.local

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

var isStatic = true
var compositionLocalName = ""
val currentLocalColor = if (isStatic) {
    compositionLocalName = "StaticCompositionLocal  scene "
    staticCompositionLocalOf { Color.Black }
} else {
    compositionLocalName = "compositionLocalOf  scene "
    compositionLocalOf { Color.Black }
}

// Recombinant marker   When the component is loaded for the first time ,recomposeFlog  by Init
// Before restructuring   That is, before the second load   take recomposeFlog Set to Recompose
var recomposeFlog = "Init"

@Composable
fun CompositionSample3() {
LocalContext.current

    val (color, setColor) = remember {
        mutableStateOf(Color.Green)
    }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(" ${compositionLocalName}")
            Spacer(modifier = Modifier.padding(20.dp))
            //3 individual  TaggedBox  Components   Only Middle  Use  CompositionLocal
            CompositionLocalProvider(currentLocalColor provides color) {
                TaggedBox(tag = "Wrapper $recomposeFlog", size = 400.dp, background = Color.Red) {
                    TaggedBox(
                        tag = "Middle $recomposeFlog",
                        size = 300.dp,
                        background = currentLocalColor.current
                    ) {
                        TaggedBox(tag = "Inner $recomposeFlog", size = 200.dp, background = Color.Yellow) {

                        }
                    }
                }
            }
            Spacer(modifier = Modifier.padding(20.dp))
            Button(onClick = {
                setColor(Color.Blue)
                recomposeFlog = "Recompose"
            }) {
                Text(" Change the color   Observe whether the components are reassembled ")
            }

        }
    }

}

@Composable
fun TaggedBox(tag: String, size: Dp, background: Color, contnet: @Composable () -> Unit = {}) {
    Column(
        modifier = Modifier
            .size(size)
            .background(background),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = tag)
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            contnet()
        }
    }
}