Modifier

Compose Guide line

https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md#elements-accept-and-respect-a-modifier-parameter

Modifier를 parameter로 넘겨줘야 된다는 것에 관한 글
https://chris.banes.me/posts/always-provide-a-modifier/

https://proandroiddev.com/a-closer-look-at-modifier-in-jetpack-compose-fdf073df92bd

Lambda function과 Recomposition 관한 글
https://proandroiddev.com/understanding-re-composition-in-jetpack-compose-with-a-case-study-9e7d96d98095
Deferred reading state 관한글
https://medium.com/androiddevelopers/jetpack-compose-debugging-recomposition-bfcf4a6f8d37

Modifier :
Modifier is a where we set some common attribute or appearance like background, padding, clip, etc..
Modifier에서는 3가지의 중요한 convention 및 특징이 있다.
1) Composable 함수에서 Modifier를 Default 파라미터로 선언해야 합니다. 이는 Caller 함수에서 ui를 어떻게 배치해야 할지를 결정하게 하기 위함입니다.
2) Modifier에서의 Chaning 순서는 디스플레이에 영향을 끼칩니다.
3) 부모 Composable이 무엇이냐에 따라 사용하는 Modifier가 조금 달라질수도 있다.

1) Default 파라미터

@Composable
fun PaddedColumn(modifier: Modifier = Modifier) {
    Column(modifier.padding(10.dp)) {
        // ...
    }
}

이렇게 Composable 함수에 modifier:Modifier = Modifier를 두는 이유는 Caller 함수에서 레이아웃을 조정할 수 있는 권한이 부여되기 위함입니다.

2) Modifier 순서

Modifier를 이용하면 기존 Android View System에 있던 Margin, Padding 구분이 필요하지 않게 된다.

Modifier Order
Modifier Scope
Modifier 코드 사용법

package com.example.jetpackcompose

import android.util.Log
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

const val TAG = "heec.choi"

@OptIn(ExperimentalMaterialApi::class)
@Preview
@Composable
fun HomeScreen() {
    Column {
        ChooseCityContent()
    }
}

@Preview
@Composable
fun ChooseCityContent(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .padding(start = 10.dp)
    ) {
        CityDropDown(modifier = Modifier.align(Alignment.CenterStart), date = "4월 9일 (일)")
        ResetButton(modifier = Modifier.align(Alignment.CenterEnd))
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun CityDropDown(modifier: Modifier = Modifier, date: String) {
    Log.i(TAG, "CityDropDown")
    val cityList = listOf("런던", "서울")

    var expanded by remember { mutableStateOf(false) }
    var selectedCity by remember { mutableStateOf(cityList[0]) }

    Column {
        Button(
            onClick = { expanded = !expanded },
            colors = ButtonDefaults.buttonColors(Color.White),
            elevation = ButtonDefaults.elevation(0.dp),
            shape = RoundedCornerShape(20.dp),
        ) {
            Text(text = selectedCity, fontSize = 30.sp)
            Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = null)
        }
        Text(text = date, modifier = Modifier.padding(start = 20.dp), fontWeight = FontWeight.Thin)

        MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(25.dp))) {
            DropdownMenu(
                expanded = expanded,
                offset = DpOffset(5.dp, (-15).dp),
                onDismissRequest = { expanded = false }) {
                cityList.forEach { city ->
                    DropdownMenuItem(onClick = {
                        selectedCity = city
                        expanded = false
                    }) {
                        if (expanded) {
                            val checked = selectedCity == city
                            val color: Color = if (checked) Purple200 else Color.Black
                            Text(text = city, color = color)
                            if (checked)
                                Icon(
                                    imageVector = Icons.Default.Check,
                                    contentDescription = null,
                                    tint = color,
                                    modifier = Modifier.padding(start = 20.dp)
                                )
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun ResetButton(modifier: Modifier = Modifier) {
    Button(
        onClick = { /*TODO*/ }, modifier = modifier.padding(end = 10.dp),
        colors = ButtonDefaults.buttonColors(Color.White)
    ) {
        Text(text = "초기화")
    }
}

@Composable
fun TimePickerContent(modifier: Modifier = Modifier) {

}

@Composable
fun CityListContent(modifier: Modifier = Modifier) {

}