[Jetpack Compose] BasicTextField로 심플한 디자인하기

코드에 주석을 달아 설명하겠습니다.

@Composable
fun BaseTextField(
    hint: String = "",
    // 텍스트가 어떻게 보일지에 대한 설정입니다.
    // 패스워드 처리를 하기 위해 PasswordVisualTransformation()를 인자로 넘겨주었습니다.
    visualTransformation: VisualTransformation = VisualTransformation.None
) {
    // 다른데서 입력 값을 가져가려면 더 상위 컴포저블로 빼야될 것 같습니다.
    var input by remember { mutableStateOf("") }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.06f)
            // 배경을 적용하기 전 padding을 줘서
            // 기본 길이를 좀 더 짧게 보이게 만들었습니다.
            .padding(horizontal = 30.dp)
            .background(
                color = CustomColor.BaseTextFieldBackground,
                shape = RoundedCornerShape(8.dp)
            )
            // 배경을 적용 후 한번 더 padding을 적용해주어
            // 내부에서 배경의 끝과 딱 붙지 않게 해주었습니다.
            .padding(horizontal = 15.dp)
    ) {
        // 입력 값이 없을 때 hint가 보이도록 하였습니다.
        if (input.isEmpty()) {
            BaseText(
                text = hint,
                fontSize = 16.sp,
                color = CustomColor.BaseTextFieldHint,
                modifier = Modifier.align(Alignment.CenterStart)
            )
        }
        // BasicTextField를 사용하여 입력 필드를 만들 수 있습니다.
        BasicTextField(
            value = input,
            // onValueChange로 값이 입력되는 것을 받아올 수 있습니다.
            onValueChange = {
                input = it
            },
            textStyle = TextStyle(
                fontSize = 18.sp,
                fontFamily = Font.sansFontFamily,
                fontWeight = FontWeight.Normal
            ),
            singleLine = true,
            // innerTextField()가 호출되어야 입력한 글자가 보이게 됩니다.
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    innerTextField()
                }
            },
            visualTransformation = visualTransformation,
            modifier = Modifier.fillMaxSize()
        )
    }
}

---

해당 코드로 심플한 디자인에 힌트를 띄우고 패스워드 처리를 할 수 있습니다.