Compose 기초 - Scaffold, TextField, Button, 구조분해, SnackBar, 코루틴 스코프

황준하·2023년 1월 28일

Scaffold TextField button snackbar 구조분해 코루틴 스코프

Android-Kotlin-Compose

목록 보기

5/9

전체 코드

package com.example.modern_android_2_20230126

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import kotlinx.coroutines.launch

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

            val scaffoldState = rememberScaffoldState()
            val scope = rememberCoroutineScope()
            // 키보드 숨기기 위한 컨트롤러(아직 실험용 코드)
            val keyboardController = LocalSoftwareKeyboardController.current

            Scaffold(
                scaffoldState = scaffoldState
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(it),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    TextField(
                        value = text,
                        onValueChange = setValue,
                    )
                    Button(onClick = {
                        // 키보드가 숨겨짐
                        keyboardController?.hide()
                        // snackbar는 suspend 함수이므로 코루틴 스코프를 사용해야 됨
                        scope.launch {
                            // 이 안에서 suspend가 붙어있는 함수를 사용가
                            scaffoldState.snackbarHostState.showSnackbar("Hello $text")
                        }
                    })
                    {
                        Text(text = "클릭!!")
                    }

                }
            }
        }
    }
}

TextField
```
TextField(
			value = "",
			onValueChange = {},
)
```
TextField에 value가 초기에는 빈값이다. 이런 상태면 TextField에 키보드로 어떤 값을 쳐도 아무것도 입력이 안된다. 이것을 동적으로 변하게 할려면 변수같은 형태로 넣어야된다.
```
val text: MutableState<String> = remember {
    mutableStateOf("")
}
```
위와 같이 선언을 해주고 아래와 같이 코드를 적어준다.
```
TextField(
	value = text.value,
	onValueChange = {
		text.value = it,
	}
)
```
입력하면서 변경된 값이 it로 들어가고 it의 값이 text.value로 들어가고 리컴포즈 되면서 value에 값이 들어가게 되는 구조이다.

구조분해

val text: MutableState<String> = remember {
     mutableStateOf("")
}

위와 같이 적힌 코드에서 MutableState 부분은 아래와같이

@Stable
interface MutableState<T> : State<T> {
    override var value: T
    operator fun component1(): T // value 반환
    operator fun component2(): (T) -> Unit // value의 setter가 지정되어있다.
}

operator라고 되어있는 부분은 구조분해기법을 사용할 수 있다. 그러기에 아래와 같이 코드를 적을 수 있다.

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

Scaffold Snackbar, FloatingActionButton 같은 것은 바로 사용이 안되고 Scaffold 안에서 사용이 가능하다. Material의 뼈대와 같은 것이다. Scaffold를 사용하기 위해서는 scaffoldState를 지정해주어야 된다.
```
val scaffoldState = rememberScaffoldState()
```
위 코드를 선언해주고
```
Scaffold(
		scaffoldState = scaffoldState
) {
...
}
```
위와 같이 지정해주면 된다.
코루틴 스코프 SnackBar는 정적으로 동작하는 Suspend함수이기에 사용하기 위해서는 코루틴 스코프를 활용해야 된다.
```
val scope = rememberCoroutineScope()
```
위 코드를 선언 후
```
scope.launch {
		// 이 안에서 suspend가 붙어있는 함수를 사용가능
		scaffoldState.snackbarHostState.showSnackbar("Hello $text")
}
```
이런식으로 활용하면 된다.

틀린 부분 지적은 언제나 환영해요🤗

황준하

Xlnt한 날까지 노력하는 개발자

이전 포스트

Compose 기초 - Image, Card, State

다음 포스트

Compose 기초 - Scaffold, TextField, Button, 구조분해, SnackBar, 코루틴 스코프

Android-Kotlin-Compose

Compose 기초 - Image, Card, State

Compose 기초 - Navigation

0개의 댓글