오류 상황

낱말 맞추기 퀴즈를 구현하며, 컴포넌트가 키보드에 가려지는 상황이 발생하였다.

• FlowRow를 활용해 낱말,텍스트를 컴포넌트로 만들어 추가 및 삭제하도록 구성하였다.

• 낱말 및 텍스트를 추가하는 과정에서, 2번째 줄 넘어서부터 생성된 컴포넌트가

  키보드 자판에 의해 가려지는 상황이 일어났다.

아래는 낱말 컴포넌트의 코드이다.

@Composable
fun ConsumeBlankContentUi(
    word: String,
    index: Int = 0,
    onContentRemove: (Int) -> Unit,
    removeIconVisible: Boolean = true,
    onValueChanged: (String, Int) -> Unit,
    textFieldEnabled: Boolean = true,
    clickableEnabled: Boolean = true,
) {
    Row(
        modifier = Modifier
            .shadow(
                elevation = 10.dp,
                shape = RoundedCornerShape(4.dp),
                clip = false,
            )
            .background(
                color = Color.White,
                shape = RoundedCornerShape(4.dp),
            )
            .clickable(
                enabled = clickableEnabled,
                onClick = { onContentRemove(index) },
            )
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {

        BasicTextField(
            value = word,
            onValueChange = { newValue ->
                onValueChanged(newValue, index)
            },
            modifier = Modifier
                .width(IntrinsicSize.Min),
            enabled = textFieldEnabled,
        )
        if (removeIconVisible) {
            Icon(
                imageVector = Icons.Outlined.Cancel,
                contentDescription = stringResource(R.string.des_remove_blank),
                tint = MaterialTheme.colorScheme.onSurfaceVariant,
            )
        }
    }
}

문제 해결이 안되는 사태 발생

키보드에 의해 화면이 가려지는 오류를 해결하는 방법을 적용해도 해결이 되지 않았다.

• 해당 블로그 등 많은 블로그가 언급하는 imePadding을 적용해도 여전히 키보드에 가려지는 오류가 발생하였다.

• 대신 imePadding 덕에 아래에 공간이 생겨 텍스트를 입력할 수는 있게 되었다.

• 하지만 근본적인 해결법이 되지는 못하므로, 추가적인 해결방법을 고민해야했다.

  

문제 해결 과정

문제를 해결하기 위해 component tree를 활용한 분석을 진행하였다.

• 텍스트 필드에 포커스가 주어지지 않기에 키보드에 의해 가려지는 거 아닐까? 라는 생각을 하였다.
• component tree를 통해 확인해보던 중, 빈 낱말의 BasicTextField의 width가 0dp임을 알게되었다.
• 이는 BasicTextField의 modifier에서 **.width(IntrinsicSize.Min)**를 설정해주었기 때문이였다.

예상이 맞는지 확인하기 위해 검증을 진행하였다.