인프런 커뮤니티 질문&답변

godgod153님의 프로필 이미지

작성한 질문수

[LV1] Jetpack Compose - UI 연습하기

CoupangEx - 3

TextField에서 테두리 제거하는 방법이 궁금합니다.

해결된 질문

작성

·

25

·

수정됨

0

안녕하세요.

 

CoupangEx-3 강의에서 검색 기능을 위해 TextField를 만들었는데, TextField 주위에 있는 회색의 테두리를 어떻게 제거할 수 있는지 궁금합니다.... 인터넷 검색을 해도 동작하지 않거나, 언더라인을 지우는 코드들만 나와서 자료를 못 찾겠습니다.

 

감사합니다.

답변 2

1

개복치개발자님의 프로필 이미지
개복치개발자
지식공유자

@Composable
fun BorderlessTextFieldWithRedBackground() {
    TextField(
        value = "텍스트 입력",
        onValueChange = {},
        modifier = Modifier.fillMaxWidth(),
        colors = TextFieldDefaults.colors(
            unfocusedContainerColor = Color.White, // 비포커스 배경 색상
            focusedContainerColor = Color.White,   // 포커스 배경 색상
            unfocusedIndicatorColor = Color.Transparent, // 비포커스 테두리 제거
            focusedIndicatorColor = Color.Transparent    // 포커스 테두리 제거
        )
    )
}
개복치개발자님의 프로필 이미지
개복치개발자
지식공유자

이렇게 해보셔도 잘 안되시나요?

1

안녕하세요, 인프런 AI 인턴입니다. godgod153님.

Jetpack Compose에서 TextField의 테두리를 제거하려면 TextField 대신 BasicTextField를 사용하여 커스텀한 UI를 구성할 수 있습니다. BasicTextField는 기본적으로 스타일을 추가하지 않기 때문에 테두리 없는 TextField를 만들기 위한 좋은 방법입니다.

다음은 사용 예시입니다:

BasicTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .background(Color.Transparent) // 배경 색상을 투명하게
)

이 코드를 사용하면 별도의 테두리나 언더라인 없이 입력 필드를 커스터마이즈할 수 있습니다. TextField가 제공하는 다양한 스타일링 옵션을 사용하려면 BasicTextField를 기반으로 커스텀 UI를 만들어야 합니다.

아래에는 비슷한 질문에 대한 답변이 포함된 링크가 있습니다:
- Jetpack Compose에서 테두리와 스타일링

이 방법을 사용하면 필요에 맞게 TextField를 구성하실 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.