Jetpack Compose Basic #2

jetpack compose

Textfield

1) Textfield의 value값이 동적으로 변화하려면, 변수화 해야한다. 

2) Sample Code

setContent {
    val testValue = remember {
        mutableStateOf("")
    }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        TextField(
            value = testValue.value,
            onValueChange = {
                            testValue.value = it
            },
        )
        Button(onClick = {}) {
            Text("click!")
        }
    }
}

Button

구조 분해 기법

따로 Kotlin 문법으로 정리해두기

val (text, setValue) = remember {
    mutableStateOf("")
}
    TextField(
        value = text,
        onValueChange = setValue,
    )

Scaffold, SnackBar, Coroutine

1) Scaffold : SnackBar 사용하기 위해서 감싸줘야한다. *Scaffold 설정 시, padding 기본 값 설정해줘야만 함. padding(it). 

2) suspend 가 들어간 경우, 코루틴에서 실행을 해야 한다. 간단하게 사용 시, scope 선언 해야한다. rememberCoroutineScope 사용한다. 

=> Coroutine Kotlin 문법으로 별도로 정리 후, 링크 걸어두기

 

3) 키보드 때문에 안보이니까, 키보드 내리기

val keyboardController = LocalSoftwareKeyboardController.current

// nullable
keyboardController?.hide()

4) Sample code

@OptIn(ExperimentalComposeUiApi::class)
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val (text, setValue) = remember {
                mutableStateOf("")
            }

//            val scaffoldState = rememberScrollState()
            val snackbarHostState = remember { SnackbarHostState() }
            val scope = rememberCoroutineScope()

            val keyboardController = LocalSoftwareKeyboardController.current

            Scaffold(
//                scaffoldState = scaffoldState,
                snackbarHost = { SnackbarHost(snackbarHostState)},
            ) {
                Column(
                    modifier = Modifier
                        .padding(it)
                        .fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    TextField(
                        value = text,
                        onValueChange = setValue,
                    )
                    Button(onClick = {
                        // nullable
                        keyboardController?.hide()
                        scope.launch {
                            snackbarHostState.showSnackbar("Hello $text")
                        }
                    }) {
                        Text("click!")
                    }
                }
            }
        }
    }
}

5) Output Screen