foreground Style에 세 가지 앱이 있어요.
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)
}
Reference
이 문제에 관하여(foreground Style에 세 가지 앱이 있어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ianchen0419/articles/18043e4393ea0b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)