[Android Compose] TextField Clickable 적용

 

동작 하고자 하는 함수

cnt += 1

 

TextField 클릭 시 cnt + 1 동작 필요

 

---

 

상황)

 

TextField에 텍스트 입력은 가능하지만 clickable 작동되지 않음

Column(modifier = Modifier.padding(16.dp),
	verticalArrangement = Arrangement.spacedBy(16.dp)) {

    var cnt by remember{ mutableStateOf(0) }
    val text = remember{ mutableStateOf("") }

    TextField(
        value = text.value,
        shape = TextFieldDefaults.outlinedShape,
        onValueChange = { text.value = it },
        modifier = Modifier
            .fillMaxWidth()
            .clickable { cnt += 1 }
    )

    Text("cnt: $cnt")
}

 

 

 

---

 

방법 1)

 

TextField에 enabled = false 추가

clickable은 가능하지만 text 입력 불가

Column(modifier = Modifier.padding(16.dp),
	verticalArrangement = Arrangement.spacedBy(16.dp)) {

    var cnt by remember{ mutableStateOf(0) }
    val text = remember{ mutableStateOf("") }

    TextField(
        value = text.value,
        shape = TextFieldDefaults.outlinedShape,
        //추가
        enabled = false,
        onValueChange = { text.value = it },
        modifier = Modifier
            .fillMaxWidth()
            .clickable { cnt += 1 }
    )

    Text("cnt: $cnt")
}

 

 

 

---

 

방법 2)

 

TextField의 focus 변화를 감지하여 처리 

text 입력 가능하고 focus가 변화할 때마다 함수 처리

TextField를 반복해서 클릭해도 focus가 변하지 않으면 함수 동작하지 않음

Column(modifier = Modifier.padding(16.dp),
	verticalArrangement = Arrangement.spacedBy(16.dp)) {

    var cnt by remember{ mutableStateOf(0) }
    val text = remember{ mutableStateOf("") }

    TextField(
        value = text.value,
        shape = TextFieldDefaults.outlinedShape,
        onValueChange = { text.value = it },
        modifier = Modifier
            .fillMaxWidth()
            //focus 될 때 처리
            .focusRequester(FocusRequester())
            .onFocusChanged {
                if(it.isFocused){
                    cnt += 1
                }
            }
    )

    Text("cnt: $cnt")
}

 

 

---

 

방법 3)

 

TextField에 interactionSource를 통해 pressed 감지하여 컴포넌트가 눌릴 때마다 함수 동작 처리

text 입력 및 press 입력 동작 처리 가능

Column(modifier = Modifier.padding(16.dp),
	verticalArrangement = Arrangement.spacedBy(16.dp)) {

    var cnt by remember{ mutableStateOf(0) }
    val text = remember{ mutableStateOf("") }

	//동작 감지
    val interactionSource =  remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

	//누를 때마다 처리 
    LaunchedEffect(isPressed) {
        if(isPressed) cnt += 1
    }

    TextField(
        value = text.value,
        shape = TextFieldDefaults.outlinedShape,
        //interactionSource 적용
        interactionSource = interactionSource,
        onValueChange = { text.value = it },
        modifier = Modifier
            .fillMaxWidth()
    )

    Text("cnt: $cnt")
}