[Compose] TextField의 여백 문제와 해결 방법

TextField의 여백 문제와 해결 방법

Jetpack Compose에서 TextField를 사용할 때, 텍스트가 위쪽으로 쏠리거나 하단에 불필요한 여백이 생기는 경우가 있다. 특히 여러 줄 입력 (multiLine)을 허용할 때 이 현상이 두드러진다.

 

TextField에서 여백이 생기는 이유

1. TextField의 내부 패딩

기본 TextField는 내부적으로 BasicTextField를 래핑하고 있으며, 기본 패딩이 포함되어 있다.
이 때문에 입력 텍스트가 위쪽으로 쏠리거나, 하단에 여백이 남을 수 있다.

2. lineHeight을 조정해도 해결되지 않음

보통 TextStyle에서 lineHeight을 조정하면 텍스트 정렬이 맞을 거라고 생각하지만, 
Compose에서는 Baseline기준으로 텍스트를 정렬하기 때문에 lineHeight만 조정해도 하단 여백이 남을 수 있다.

3. TextField의 높이를 강제 지정하는 경우

modifier.height() 또는 modifier.heightIn()을 사용할 경우, 내부 정렬이 깨지면서 텍스트가 위쪽으로 몰릴 수 있다.

 

해결 방법

wrapContentHeight() 사용

wrapContentHeight()를 사용하면 입력된 텍스트 높이에 맞춰 TextField의 높이가 자동 조정되므로, 위쪽으로 몰리는 문제가 해결된다.

@Composable
fun FixedTextField() {
    var text by remember { mutableStateOf("") }

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        textStyle = TextStyle(
            fontSize = 16.sp,
            lineHeight = 24.sp, // ✅ 줄 간격 조절
            textAlign = TextAlign.Start
        ),
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight() // ✅ 내부 텍스트 높이에 맞춰 조정
            .background(Color.LightGray)
    )
}

 

참조 :

https://proandroiddev.com/the-missing-pieces-of-text-alignment-in-compose-text-50efec9bc387