SSwiftUI / Field Guide
SWIFTUIDEMO · 39 SOURCE FILES

FROM PRIMITIVES TO SMALL APPS

A map of SwiftUI.

Explore the building blocks. Read the source. Try them in your browser.

12sections connected

Component atlas

39 FILES
Pan and zoom to explore · Select a file to read its source
React Flow

Primitives

Text

The smallest visual building blocks: text, images, colors and shapes.

Demo/Views/1_Primitive/Text_Demo.swift

Text_Demo
Unmodified project file
1import SwiftUI
2 
3struct Text_Demo: View {
4    var body: some View {
5        Text("Hello, World!")
6            .padding()
7            .background { Color.accentColor }
8    }
9}
10 
11#Preview("Default") {
12    Text_Demo()
13}
14 
15#Preview("Font") {
16    Text("Learn SwiftUI")
17        .font(.largeTitle)
18        .fontDesign(.serif)
19}
20 
21#Preview("Markdown") {
22    Text("Visit **Apple** [website](https://www.apple.com)")
23}
24 
25#Preview("Interpolation") {
26    Text("""
27    Showtimes: \(Text("Friday").bold()) \
28    and \(Text("Saturday").bold()) \
29    \(Image(systemName: "sun.min.fill"))
30    """)
31}
32 
33#Preview("Plurals") {
34    let count = 1
35    Text("Sold ^[\(count) tickets](inflect: true)")
36}
37 
38#Preview("Format Styles") {
39    VStack(spacing: 16) {
40        let genres = ["action", "comedy", "literature", "music"]
41        Text("Genres: \(genres, format: .list(type: .and))")
42 
43        let distance = Measurement(
44            value: 25.4, unit: UnitLength.meters
45        )
46        Text("Distance: \(distance, format: .measurement(width: .wide))")
47 
48        let price = 9.99
49        Text("""
50        Price: \(price, format: .currency(code: "USD"))
51        """)
52 
53        Text("""
54        Only \(
55            Text("25")
56                .foregroundStyle(
57                    .linearGradient(
58                        colors: [.red, .orange],
59                        startPoint: .leading,
60                        endPoint: .trailing
61                    )
62                )
63        ) minutes left!
64        """)
65    }
66}
67