[Jetpack Compose | Kotlin ] 동적 콘텐츠 구현

https://developer.android.com/jetpack/compose/mental-model?hl=ko 

Compose 이해  |  Jetpack Compose  |  Android Developers

 

이름 목록 받아서 각 사용자에 대한 인사말 생성

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StudyComposeEventTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                	// 리스트
                    val list: List<String> = listOf("엉덩이", "궁뎅이", "뿡")
                    Greeting(list)
                }
            }
        }
    }
}

 

fun Greeting(names: List<String>, modifier: Modifier = Modifier) {
    Column() {
        for (name in names) {
            Text("Hello $name")
        }
    }
}

반복문

: name in names

:: names만큼 반복

 

 

 

 

 

재구성

ClickCounter (버튼 클릭 카운트)

var clicks = remember {
        mutableStateOf(0)
    }
    ClickCounter(clicks.value, onClick = {clicks.value++})

remember : State값이 바뀌면 재구성이 일어나는데, 이전 State를 기억해야하는 경우 값 저장

MutableState : 읽기와 쓰기를 관찰
    -> mutableStateOf() 안에 들어가는 변수는 디폴드 값
    -> .value는 그 변수의 값

    -> onClick이 될 때마다 State가 바뀌어 재구성이 일어남

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

 

 

SharedPrefsToggle (체크 박스)

var text = remember {
        mutableStateOf("unchecked")
    }
    var isValue = remember {
        mutableStateOf(false)
    }
    SharedPrefsToggle(text.value, isValue.value,
        onValueChanged = {
            if (!isValue.value) {
                text.value = "checked"
            } else {
                text.value = "unchecked"
            }
            isValue.value = !isValue.value
        })

@Composable
fun SharedPrefsToggle(
    text: String,
    value: Boolean,
    onValueChanged: (Boolean) -> Unit
) {
    Row() {
        Text(text)
        Checkbox(checked = value, onCheckedChange = onValueChanged)
    }
}