티스토리 뷰
스유 맛보기
기존과 달리 구조체 기반
최소 13.0 이상부터 가능
처음만들면 ContentView라는 파일안에 두 개의 구조체가 있음.
ContentView에 코드를 작성하면 아래의 ContentView_Previews를 통해 화면에 프리뷰를 보여주는 느낌인 것 같음.
import SwiftUI
struct TestView: View {
var body: some View {
Text("Hello, World!")
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
기본으로 만들어진 파일에서는 여러 객체를 작성해도 버티컬하게 잘 보이지만 새로 추가한 파일에서는 프리뷰에 하나의 객체만 보이고, 프리뷰의 윗부분을 확인해보면 프리뷰가 늘어나기만함.
=> body는 오직 하나의 객체만 리턴해야함. 처음에 잘 됐던 이유는 VSStack을 리턴하고 이 스택안에 여러개의 객체를 쌓아서 그랬던거임
VSStack은 Vertical, HSStack은 Horizontal이라고 생각
이렇게 닷신텍스를 이용해 작성하는데 이를 modifier라고 함.
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "star.fill")
.imageScale(.large)
.foregroundColor(.yellow)
Text("하이")
Text("바보")
}
.padding()
.border(.brown)
.padding()
.border(.green)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.gray)
}
}
kerning으로 글씨 간격을 띄울 수 있음.
strikethrough로 취소선 그릴 수 있음.
underline으로 밑줄을 그릴 수 있음.
기존의 numberOfLines로 설정했던 것을 .lineLimit으로 바로 설정 가능
Circle, Ellipse, Rectangle로 모양을 바로 그릴 수 있음.
가운데부터 채워질텐데 Spacer를 이용해 공간을 띄울 수 있음.
struct ExampleView: View {
var body: some View {
VStack {
Text("Hello, World!")
.font(.largeTitle)
.fontWeight(.ultraLight)
.foregroundColor(.brown)
Spacer()
Circle()
.fill(.yellow)
Ellipse()
.fill(.cyan)
Rectangle()
.fill(.gray)
Spacer()
Image(systemName: "star.fill")
.imageScale(.large)
.foregroundColor(.primary)
Text("Hello, World!")
.font(.caption)
.italic()
.bold()
.kerning(10)
Spacer()
Text("hello\ndd\ndd")
.underline(pattern: .solid)
.strikethrough(color: .cyan)
.lineLimit(2)
.kerning(3)
}
}
}
프리뷰 코드에 .previewDevice를 통해 디바이스 설정 가능. 이때 디바이스 이름은 틀리면안됨.
struct ExampleView_Previews: PreviewProvider {
static var previews: some View {
ExampleView()
.previewDevice("iPhone 11")
}
}
프리뷰에서 왼쪽 아래의 커서모양 누르고 화면을 누르면 해당하는 코드를 알려줌
작성한 코드에서 커맨드를 누르고 객체를 누르면 바로 embed할 수 있는 옵션이 나옴.
List를 이용하면 테이블뷰처럼 나타낼 수 있음.
struct ListView: View {
var body: some View {
List {
Text("1위")
.font(.callout)
.kerning(10)
.underline()
Text("5위")
VStack {
Text("6위")
Text("6위")
Text("6위")
}
.border(.brown)
Text("2위")
.font(.footnote)
.fontWeight(.ultraLight)
.foregroundColor(Color.pink)
Text("8위")
Text("9위")
ForEach(0..<50) {
Text("리스트셀 \($0)")
}
}
.listStyle(.plain)
.font(.largeTitle)
}
}
List에 모디파이어를 사용한 것과 내부의 객체에 모디파이어를 사용한다면 각 뷰의 모디파이어가 우선이라고 생각하면됨.
=> List에 font를 이용해 전체의 font를 바꿨어도 내부에서 따로 설정해주면 그게 우선이 되는 것임.
내부에 계속 추가하다보면 10개 이상으로는 추가가 안됨.
-> ForEach를 이용하면 추가할 수 있음.
'TIL' 카테고리의 다른 글
[TIL] 2023 / 03 / 17 (0) | 2023.03.17 |
---|---|
[TIL] 2023 / 03 / 16 - Python (0) | 2023.03.16 |
[TIL] 2022 / 11 / 1 (0) | 2022.11.01 |
[TIL] 2022 / 10 / 27 - Rx (0) | 2022.10.27 |
[TIL] 2022 / 10 / 26 - Rx (0) | 2022.10.26 |
댓글
최근에 올라온 글
- Total
- Today
- Yesterday