foreground Style에 세 가지 앱이 있어요.

7932 단어 SwiftUItech
foregroundStyle()는 iOS 15에서 가져온 아름다운 컬러 디스플레이 기능입니다.foregroundStyle()() 중에서 다음과 같은 네 개의 Semantic Color를 작성하는 것이 좋다.
foregroundStyle(.primary)
foregroundStyle(.secondary)
foregroundStyle(.tertiary)
foregroundStyle(.quaternary)
()에 일반 Swift Color를 적으면 OK죠.
위의 네 개의 기입치가 아니었다면 다양한 아름다움이 없었을 것 같다.

적용 1: 원색


VStack {
	Text("Primary")
	    .foregroundStyle(.primary)
	Text("Secondary")
	    .foregroundStyle(.secondary)
	Text("Tertiary")
	    .foregroundStyle(.tertiary)
	Text("Quaternary")
	    .foregroundStyle(.quaternary)
}

색상을 직접 표시합니다.사용 방법은 foregroundColor()와 같습니다.

적용 2: 주제 색상


 VStack {
	Text("Primary")
	.foregroundStyle(.primary)
	Text("Secondary")
	.foregroundStyle(.secondary)
	Text("Tertiary")
	.foregroundStyle(.tertiary)
	Text("Quaternary")
	.foregroundStyle(.quaternary)
 }
 .font(.largeTitle)
+.foregroundStyle(.purple)

하나의 주제색에 대해서는 네 개의 자색으로 표시할 수 있다.

적용 3: 재료 설계


+ZStack {
+	Color.purple
	VStack {
		Text("Primary")
		    .foregroundStyle(.primary)
		Text("Secondary")
		    .foregroundStyle(.secondary)
		Text("Tertiary")
		    .foregroundStyle(.tertiary)
		Text("Quaternary")
		    .foregroundStyle(.quaternary)
+	}
+	.background(.thickMaterial)
+	.font(.largeTitle)
}

조건으로 삼다
① 텍스트 배경이 있는 색상이나 이미지(위의 보라색 부분)
② 텍스트 컨테이너에 지정background(.thickMaterial)재료 설계 효과가 상당히 작다
대조도를 비교하는 과정에서 잘 보이시죠?
소재 디자인이 있어요.
소재 디자인 없음



부모의 뷰Text() 지정background()foregroundStyle() 역시 소재 디자인 효과를 낼 수 있다.
ZStack {
	Image("image_name")
	Text(resort.imageCredit)
	    .background(.thinMaterial)
	    .foregroundStyle(.secondary)
}

좋은 웹페이지 즐겨찾기