[안드로이드 코틀린] Compose - 버튼 클릭해서 숫자 카운트 하는 방법

이번 시간에는 버튼을 눌러 숫자 카운트 하는 방법을 알아보겠습니다. 

---

목차

1. 실행 화면

2. 카운트 기능 함수

3. 레이아웃 함수

4. 전체 코드

---

1. 실행 화면

 

2. 카운트 기능 함수

 - 설명

  1. remember

   - Compose의 상태 보존 함수

   - 화면이 다시 그려져도 상태를 유지하고 일관성 있는 동작을 보장

  2. mutableStateOf(값)

   - Compose에서 가변 상태를 생성하는 함수

   - Compose가 상태를 추적하고 상태 변경 시 UI를 업데이트

@Composable
fun CounterComponent(){

    var count by remember { mutableStateOf(0) }
    
    Button(onClick = { count++ }) {
        Text(text = "숫자 증가")
    }
    
    Text(text = "Counter: $count")
}

 

 

3. 레이아웃 함수

 - 설명

  1. fillMaxSize() : 세로, 가로 최대 크기 설정

  2. verticalArrangement : 세로 위치 정렬

  3. horizontalAlignment: 가로 위치 설정

@Composable
fun MyApp(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CounterComponent()
    }
}

 

4. 전체 코드

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun CounterComponent(){

    var count by remember { mutableStateOf(0) }
    
    Button(onClick = { count++ }) {
        Text(text = "숫자 증가")
    }
    
    Text(text = "Counter: $count")
}

@Composable
fun MyApp(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CounterComponent()
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        MyApp()
    }
}

 

2023.06.19 - [안드로이드] - [안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

[안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

2023.06.12 - [안드로이드] - [안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

[안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

2023.06.05 - [안드로이드] - [안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법