[SwiftUI] HStack 없이 Text마다 다른 색 입혀주기

오늘 구현해야 하는 화면은 회원가입을 위한 아래화면이었다.

 

 

처음 생각했던 구현 코드는 가장 밖에 VStack으로 감싸주고,

HStack을 '이름/닉네임/ID..' 등을 각각 묶어주고 (또 Group으로 묶어주기)

이걸 여러개 만드는 것이었는데 이런 반복작업을 하기엔 너무 코드가 길고 분명 더 좋은 방법이 있을 것 같았다.

 

🤔 처음 생각했던 코드

VStack(alignment: .leading) {
	Group {
        HStack {
            Text("이름")
                .bold()
            Text("*")
                .foregroundStyle(Color.red)
        }
                FCTextFieldView(text: $password,
                            isWrongText: isWrongText,
                            isTextFieldDisabled: isTextFieldDisabled,
                            placeholderText: "이름을 입력하세요")
	}                            
    
		Text("닉네임")
			.bold()
		
        FCTextFieldView(text: $password,
			isWrongText: isWrongText,
			isTextFieldDisabled: isTextFieldDisabled,
			placeholderText: "이름을 입력하세요")

	HStack {
            Text("ID(이메일)")
                .bold()
            Text("*")
                .foregroundStyle(Color.red)
        }
                FCTextFieldView(text: $email,
                            isWrongText: isWrongText,
                            isTextFieldDisabled: isTextFieldDisabled,
                            placeholderText: "이메일을 입력하세요")
	}                            
    
    // 이렇게 계속 반복...?
}

 

그리고 심지어 위와 같이 하면 *이 Text("이름")와 딱 달라붙지 않아서 또 코드를 추가해주어야 할 판(?)이었다.

 

그러다 좋은 방법을 발견했다.

바로 +를 이용하는 것이었다.

그렇게 되면 우선 HStack은 추가하지 않아도 되고,

그러면 여러개의 HStack이 생기지 않기 때문에 Group도 쓰지 않아도 되고,

글자를 붙이기 위해 또 다른 코드를 추가하지 않아도 된다.

 

💡 해결 방법을 적용한 코드

VStack(alignment: .leading) {
	Text("이름")
		.bold() +
	Text("*")
		.foregroundStyle(Color.red)

	FCTextFieldView(text: $password,
					isWrongText: isWrongText,
					isTextFieldDisabled: isTextFieldDisabled,
					placeholderText: "이름을 입력하세요")                         
    
		Text("닉네임")
			.bold()
		
        FCTextFieldView(text: $password,
			isWrongText: isWrongText,
			isTextFieldDisabled: isTextFieldDisabled,
			placeholderText: "이름을 입력하세요")


	Text("ID(이메일)")
		.bold() +
	Text("*")
		.foregroundStyle(Color.red)

	FCTextFieldView(text: $email,
					isWrongText: isWrongText,
					isTextFieldDisabled: isTextFieldDisabled,
					placeholderText: "이메일을 입력하세요")            
}

 

 

 

 

참고 : https://stackoverflow.com/questions/59071375/how-do-style-text-view-with-different-font-and-colour-on-string-subranges