🍎
ios.dev
ios.dev
  • 🍎ios.dev
    • 🛠️tools
    • 📰News
    • 📅Events
      • WWDC22
    • 🔲todo
      • 📖to read ...
      • 🧪研究中 ...
        • Formatter
        • Dependency Injection
        • 🔸Never
        • 🧪Google Sheet as JSON
      • 💈Examples
        • 💈MonthView
        • 💈CircleText
        • 💈Collapsible
      • 📓課程筆記
        • 📚SwiftUI Tutorials
          • Tutorials ⟩ Model
          • Tutorials ⟩ Views
          • Tutorials ⟩ Extensions
        • 📚Swift Animation Mastery
          • Triggers
            • 💈example ⟩ Picker
            • 💈example ⟩ SubButtons
        • Emoji Memory Game 📚
        • 設計卡片 📚
          • 排版
          • 元件化
          • 設定動畫
          • 設定手勢
          • 動畫的屬性
        • 新擬物風 (Neumorphic Design)
          • 漸層設計
            • Neu 🔸
          • 卡片設計
            • NeuCard 📦
          • 按鈕設計
            • IconCard 📦
            • ButtonUp, ButtonDown 📦
          • 設計進度條
            • NeuProgressBarTitle 📦
            • MyProgressBar2 📦
            • NeuProgressBar2 📦
      • 自訂型別
        • @KilometersPerHour
        • 🐶PlaygroundConsole
        • 👔EmojiTextFieldStyle
        • 🌅Outlined
        • 🌅BlurView
        • 🌅 SystemImage
        • 🌅 Fit
        • 🌅 Unwrap
        • ✨Custom Circle
    • 🔰templates
      • 🗒️page template
    • 🧪lab
    • 🔰terms
      • 🔰roles
        • 🔸implementer
        • 🔸user
      • 🔸state
      • 🔸data separation
      • 🔸data model
      • 🔸source of truth
      • 🔸user interaction
      • 🔸user interface
  • ⭐features
    • ⭐Swift
      • ⭐️ Swift 5.6
        • any
        • type placeholders
      • ⭐️ Swift 5.7
    • ⭐SwiftUI
      • ⭐SwiftUI 4.0
    • ⭐Xcode
      • Xcode 14
    • ⭐iOS
      • ⭐️ iOS 15
        • ⭐️ Live Text
      • ⭐️ iOS 16
    • Global Variables
    • Destructuring
    • Variadic Parameter
    • autoclosure
    • 🔰Key Path
      • Key Path Expressions as Functions
    • Calling Types As Functions
  • 👔custom
    • 🌀extension
      • 🌀View+
        • 👔view.if(_:then:)
        • 👔view.if(let:then:)
        • 👔view.inverseMask()
        • 👔view.overlayText()
        • 👔view.resizableFont()
        • 👔view.watermark()
        • 🚫view.foreground()
      • 🌀Color+
        • 🌀system colors
          • 🖼️SystemColorsView
          • 🖼️Swatch_0
        • 🌀Color.rgb()
        • 🌀color.hue
      • 🌀Gradient+
        • 🌀Gradient.linear()
        • 🌀Gradient + View
      • 🌀Image+
        • 🌀Image(playground:)
      • 🌀Formatter+
      • 🌀RoundedRectangle+
      • 🌀Text+
        • 🌀Text(symbol:)
    • 🔰snippets
      • 💾view + previews
      • 💾view modifier (template)
    • 🎁package
      • 📕如何自製 Swift package
      • 🏛️GeometryKit
        • 🅿️MetricSpace
        • 🅿️Vector
        • 🅿️ComplexNumber
        • 🅿️Vector2D
        • 🅿️Frame
    • 🅿️protocol
      • 🅿️Repeatable
    • 🖼️view
      • 👔HLine / VLine
      • 👔Swatch
      • 👔ShapeStyleView
    • 🎛️control
      • 🎛️SlidersForSize
      • 🎛️SliderWithLabel
  • 🐦Swift
    • 🎲math functions
      • abs()
      • .rounded()
      • .squareRoot()
      • pow()
    • 🔰scope
      • 🔸global scope
      • 🔸local scope
      • 🔸module
      • 🔹import
      • 🔸framework
        • 🧩built-in frameworks
          • 🧩Foundation
            • 📦Calendar
            • 📅Date
              • .sevenDaysOut
              • Date.from(year:month:day:)
              • Date.roundedHoursFromNow(hours)
            • 📦URL
              • 🌀 URL+ext
              • .isImage
            • 🗃️FileManager
              • 🌀 FileManager+ext
              • .documentDirectory
            • 🎁Bundle
            • 🅿️FormatStyle
          • 🧩Core Graphics
            • 🌀CGRect
              • rect.inset(by:)
            • 🌀CGSize
            • 🌀CGVector
            • 🌀CGPoint
          • 🧩SpriteKit
          • 🧩Combine
            • 🅿️Publisher
              • 🐶Future
              • 📦URLSession.DataTaskPublisher
            • ⚙️ Promise
            • 🔸Result
            • ⏰Timer
              • ✨cancellable timer
              • 👔TimerView
              • 👔TimerView (scheduledTimer)
          • 🧩AVFoundation
          • 🧩Swift Charts
          • 🧩Metal
          • 🧩WeatherKit
    • ➕operator
      • 🔸compound assignment operator
      • ✖️Character * Int
      • ✖️a^^n
      • ➕ternary conditional operator (a ? b : c)
    • 🍀type
      • 🍀type category
        • 🍀basic types
          • ✅Bool
            • .iOS14
          • ⁉️Optional
            • optional binding
            • optional chaining
            • nil coalescing
            • compare with Optional
          • 🔤String
            • 🔰String Interpolation
              • Custom String Interpolation
              • Expressible by String Interpolation
              • specifier / formatter
            • 📦AttributedString
            • 😃Emojis
            • String.Index
            • str.capitalized
            • str.split()
            • str.trim()
            • str[i], str[i..<j], str[i...j]
            • str.pad()
          • 📦Int
          • 📦Array
            • 🌀arr.split(size:)
            • 🌀arr.first()
            • arr.split(where:)
            • arr.index(of:)
            • arr.allElementsEqual
            • .allElementsSameLength
          • 📦enum
            • ⭐Comparable Enums
            • compound cases
            • 💡filter cases
            • 💡用 enum 封裝不同型別
          • 🚥tuple
          • 🔰function
            • 🔸default parameter
            • 🔸argument label
            • 🔸return value
              • #️discardable result
            • 🔰function as variable
            • 🔰fully qualified name
          • 🔰closure
            • 🔰closure expression
            • 🔰escaping closure
          • 🍄class
            • 🔰weak self
          • 🔢Numbers
            • 🅿️FloatingPoint
              • 🌀floating +−⨉÷ int
              • .decimalPlaces()
            • 🅿️BinaryFloatingPoint
              • .binaryBitPattern
              • 🖼️BinaryBitPatternView
            • 🅿️BinaryInteger
              • .binary(digits:)
            • range.contains()
          • ⚖️struct vs. class
        • 🅿️protocol
          • 🔰protocol inheritance
            • 🔰protocol hierarchy
            • 🚫can't change builtin hierarchy
          • 🔰protocol requirements
          • 🔴Protocol Extensions
          • 🔰generic protocol
            • 📘some, any
          • 🔰associated type
          • 🔴Conditional Conformance
          • 🔴Combining Protocols
          • 🔰Typecasting with Protocols
          • ⚠️retroactive conformance
          • 🅿️Any
          • 🅿️Comparable
            • .clamped(in:)
          • 🅿️Hashable
          • 🅿️Identifiable
          • 🅿️CaseIterable+ext
          • 🎬POP 介紹
          • ExpressibleByLiteral
        • ⚖️some╱any╱generics
          • 🔸some (opaque type)
          • 🔸any (boxed protocol type)
        • 🍀nested types
          • extension of nested types
          • ❓to nest or not to nest❓
        • 🍀generics
          • ⚠️generics & subtypes
          • ❗specialize generic function
          • ❓default type parameter
        • 🍀non-nominal types
      • 🔰property
        • 🔸public property
        • 🔸stored property
          • 🔸property observer (willSet/didSet)
        • 🔰computed property (get/set)
          • local computed variables
          • mutating getter / nonmutating setter
        • ⚖️stored vs. computed
        • ⚖️willSet/didSet vs. get/set
        • 🔰property wrapper
          • ✨Clamped
          • ✨Trimmed
          • ✨UnitInterval
      • 🐣inheritance
        • 🔸Self
      • 🔰type alias
      • 🔰extension
        • extension of typealias❓
      • ⭐implicit return
      • 🔰type erasure
      • 🔰initialization
        • 🔰initializers
          • 🔸required initializer
        • 🔰class initializer inheritance
          • 兩階段初始化
          • 自動繼承初始化程序
    • 🔰statement
      • 📘do
      • 🔤semicolon (;)
      • 🔰simple statement
        • 🔰expression
          • 🔰primary expressions
        • 🔰declaration
      • 🔰compiler control statement
    • 🔰flow control
      • 🔄loop
        • 📘for...in
        • 🔰for...in vs. forEach
      • 🔀branch
        • 📘if
        • 📘guard
        • 🔹switch
      • ↩️control transfer
        • 📘break
        • 📘continue
        • 📘return
        • 📘throw
        • 📘fallthrough
    • 🔰Collections
      • 🅿️Sequence
        • seq.forEach()
        • seq.reduce(_:_:)
        • seq.reduce(into:_:)
        • reduce() vs. reduce(into:)
        • seq.grouped(by:)
        • seq.sorted()
        • seq.sorted(by:)
        • seq.sorted(_:)
        • seq.foldMap(_:_:)
        • seq.stateMap(_:_:)
        • seq.sum
      • 🅿️Collection
        • collection[safe: index]
        • collection.allElementsEqual
        • collection.allElementsSameLength
        • collection.lengthsOfElements
        • collection.columnWidths
      • 🅿️IteratorProtocol
      • 🅿️OptionSet
      • Collection Types
    • 🔰Subscripts
      • Subscripts with Default Arguments
    • 🔰Attributes
      • ⭐Result Builders
        • result-building methods
        • various result types
        • result builder transform
        • custom result-builder attributes
    • 🔰Pattern Matching
      • 🔴Sentence Patterns
        • ... as! ...
        • (... as? ...)?.method()
        • if let ... as?
        • if/guard case let
        • for case let ... where
        • switch case
        • switch case is ...
        • switch case let ... where
        • switch case let ... as
        • switch on other types
      • operator (~=)
      • enum case pattern
    • 🔰Exceptions
    • 🏛️Standard Library
      • 🅿️Codable
    • 🔰Concurrency
      • 🅿️Sendable
        • 🐞has non-Sendable type
    • 🔰File System
    • 🔰Networking
    • 🐞Debugging
      • 🔮Mirror
        • Mirror.handleChildren()
      • 👔Logger
      • 👔HasMirrors
      • 👔log()
      • 👔CaseReflectable
      • 👔NonNominalTypeWrapper
      • Metatype
    • 🔰Input/Output
    • 🔰Regex
    • 🔰Access Control
  • 🔰SwiftUI
    • 🔰SwiftUI terms
      • 🔸built-in view
    • 🔰introduction
      • SwiftUI Essentials
    • 🚩app
      • 🅿️App
      • 🔰scenes
        • 🅿️Scene
      • 🔰windows
        • 📦WindowGroup
    • 🔰views
      • 🔰view hierarchy
        • 🔸container view
        • 🔸composed view
        • 🔸root view
        • 🔸child view
        • 🔸parent view
        • 🔸destination view
      • 🔰view state
        • 🔸state value
          • @State
            • 🔰init State
            • ✨dynamic underline
        • 🔸state object
          • @StateObject
        • 🔸observable object
          • 🅿️ObservableObject
          • 🔸published value
          • 🔸observer
          • @Published
        • 🔰animate state changes
        • 🔸binding
          • @Binding
            • 🔰Binding State
            • 🔰Binding from StateObject
            • 🔰init Binding
            • ❗return Binding
      • 🔰view layout
        • 🔹.padding( )
        • 🔴Position
        • 🔸frame
          • 🌀view + .frame()
          • 🔹.frame()
            • ✨TestIdealSizeView
            • ✨TestFrameView
        • 🔸view size
          • 🔴Size Classes
          • 🔴Dynamic Type Sizes
            • 🌀DynamicTypeSize+ext
          • 🔸ideal size
        • 🎁stacks
          • 📦ZStack
          • 👔AdaptiveHStack
          • 👔StackForEach
        • 🎁grids
          • 📦LazyVGrid
            • 🖼️StandardGradientGrid
          • 🟠grid layout algorithm
          • 📦GridItem
            • 🔰adaptive column
            • 🔰flexible column
            • ✨NColumns
          • 👔VGridForEach
            • ✨TestLittleSquares
          • 👔ScrollVGridForEach
            • ✨TestSVGFE
          • ✨Grids ⟩ examples
            • ✨Smileys
            • ✨Grid
              • 📦GridLayout
            • ✨MyGrid
              • ⛔Generic parameter '...' could not be inferred.
            • 🐞problem with .readSize()
            • ✨ItemsView
              • 🖼️TestItemsView
              • 📦RatioRetainingLayout
              • 🎛️SizeRatioControl
              • 🅿️IndexedGridLayout
        • Adaptive Layout
        • Alignment
          • Implicit Alignment
          • Custom Alignment within ZStack
          • 🔰各種對齊 (alignment)
        • 🌿Layout ⟩ Types
          • 📦TimelineView
        • ⛔Cannot convert value of type 'Self' to expected argument type 'Binding<C>'
      • 🔰view actions
        • 🔰delete item from list
        • 🔰add item to list
      • 🔰view environment
        • 🔸environment object
        • 🔸environment value
          • 📦dismiss
        • @Environment
          • .editMode
        • @EnvironmentObject
      • 🔰view groupings
        • 🖼️ForEach
          • 🔹.onDelete
          • ⚖️List vs. ForEach
          • ✨ForEach examples
      • 🔰navigation
        • 🔸navigation bar
        • 📦NavigationStack
        • 📦NavigationSplitView
        • 📦NavigationLink
      • 🔰view modifier
        • ✨examples
          • .nsfw()
          • .roundedBorder()
          • .neumorphic()
        • 🔰add modifiers to Xcode
        • 🔰conditional modifier
        • 🔰layout modifier
        • 🔰rendering modifier
        • 🔰adjusting text
        • 🅿️ViewModifier
      • 🔰drawing views
        • 🔸foreground
          • 🔸foreground element
          • 🔸foreground style
            • 🔹view.foregroundStyle()
            • 🔹ShapeStyle.foreground
        • 🔸background
          • 🔸background style
          • 🔹.background()
        • 🔸blend mode
          • ✨.destinationOut
        • 🔸mask
          • 🔹view.mask()
        • 🔸shadow
          • 🔰container + shadow
          • 📦ShadowStyle
          • 🔹view.shadow()
        • 🔹view.clipShape()
          • 🐞mismatching types
        • 🔹veiw.compositingGroup()
      • 🔰measuring views
        • 📦GeometryProxy
          • 🌀GeometryProxy+ext
        • 📦 GeometryReader
          • 🔰GeometryReader 的對齊方式
      • 🔰Configuring Views
      • 🔰events
        • 🔹.allowsHitTesting()
      • 📦ViewBuilder
        • ViewBuilder transforms
        • support for stored properties
      • 🔰Optional Views
      • 🅿️View
        • .dimension()
          • 🌀Path+
          • 👔DimensionPositions
          • 👔WidthDimension
          • 👔HeightDimension
          • 👔LeftArrow
          • 👔LeftArrowShape
          • 👔UpArrow
          • 👔UpArrowShape
        • id(_:)
        • .badge()
        • .border(), .borderLeft() ...
        • .hideIf()
        • .logType()
        • .getSize()
        • .grids()
        • .offset()
        • .onChangeSize()
        • .onDrag
        • ❌.readSize()
        • resizableFont()
        • .show(if:)
        • .shadowedBorder()
        • .testFrame()
        • view.actOnSelfWidth()
      • 📦Link
      • 🔰Swipe Actions
      • 🔰3D transform
      • ⭐Live Activites
      • 🔰life cycle
    • 🔰styles
      • 🔸current style
    • 🔰lists
      • 📦List
        • 🅿️ListStyle
        • ⭐list background color
    • 🎛️controls
      • 🔰pickers
        • 🎛️Picker
        • 🎛️DatePicker
      • 🔰toolbar
      • 🔰FocusState
      • 📦Divider
      • 📦Text
        • 📦Font
          • 🔰custom font
        • 🔰text formats
          • 🔸no wrap
        • 🔰Markdown
        • ❓math equations❓
        • ⭐number of lines
      • 📦Image
        • 🔹image.renderingMode()
        • 🔸template image
        • 🔰SF Symbols
        • 🍄ImageRenderer
      • 📦Label
        • Label Styles
          • Label ⟩ custom styles
      • 📦GroupBox
      • 📦ControlGroup
      • 📦Section
      • 📦ScrollView
      • ⭐ShareLink
      • 🎛️Button
        • 🔰Button Roles
        • 🔰Button Styles
          • 🅿️PrimitiveButtonStyle
          • 🔰Button with Materials
          • Button ⟩ custom styles
      • 🎛️EditButton
      • 🎛️ProgressView
      • 🎛️TextField
        • TextField ⟩ formats
          • ✨.currency
        • TextField ⟩ styles
          • textField.style(_:)
      • 🎛️Toggle
        • 🔰Toggle Styles
      • 🎛️SecureField
      • 🎛️Slider
        • 🔰Slider label position
      • 🎛️Gauge
    • 🔰shapes
      • 🔰transform shape
        • 🔹shape.stroke()
          • 🌀StrokeStyle
          • ✨MarchingAnts
      • 💈正圓變成正五邊形
      • 🅿️Shape
        • 📦AnyShape
        • 🔸fill
          • ✨even-odd fill mode
          • .evenOddFill
        • 🌀Shape + ext
          • shape.outlined()
        • ✨RoundedCorners
        • ✨Helper Shapes
          • 💜LineShape
          • 💜GridLinesShape
          • 🖼️GridLines
          • 🖼️Line
          • 🖼️Pin
          • 🖼️Point
        • ✨Sports Car in Sunset
          • 💜Vehicle.CarBodyShape
          • 🖼️Vehicle
        • 👔Polygon
      • 🅿️ShapeStyle
        • 📦Color
          • 🔸color.gradient
          • 🔰Theme
        • 📦Gradient
        • 📦ImagePaint
        • ♦️.shadow()
        • .white()
        • ShapeStyle+LinearGradient
        • 📦Material
      • 🔰Matched Geometry Effect
        • ✨MGE ⟩ animation
      • 📦Path
        • path.fit()
        • path.line()
        • path.transform
      • 📦Canvas
      • 📦Anchor<T>
    • 🎁container
      • 🎁collection
      • 🎁layout
        • ⭐Grid
        • ⭐ViewThatFits
        • ⭐AnyLayout
        • ⭐Layout
      • 🎁presentation
        • ⭐bottom sheet
        • 🎁TabView
          • ✨tabs with tag
    • 🚦data flow
      • 🚥Preferences
        • 👔ViewPreference
        • 🅿️PreferenceKey
          • FirstNonNil<T>
          • AllValues<T>
          • MaxValue<T>
        • 🚥Anchor Preferences
        • ✨Preferences ⟩ examples
          • ✨views with same width
            • .reportWidth() ...
          • ✨selected button with underline
    • 🏎️animations
      • 🔰implicit vs. explicit
      • 🅿️Animatable
        • 🅿️GeometryEffect
        • 🔸Animatable Modifiers
          • ✨.tapToShake()
      • 📦Animation
      • 🔰delay
      • 🔸Animation Curves
        • 🔸Bezier Curves
        • easeInOutExp
      • ✨Animations ⟩ examples
        • ✨Spinner
        • ✨Wheel of Fortune
        • ✨Loading Indicators
      • 🔰Transitions
        • 🔰custom transitions
        • 📦AnyTransition
          • AnyTransition.combined()
        • ✨transition ⟩ scale
        • ✨combining transitions
    • 👆Gestures
      • 🔰update gesture states
      • 🔰update view states
      • 🚥GestureState
      • 👆Long Press
      • 👆Drag
        • 👔.draggable()
          • 🖼️HandlePoint
      • 🔰Combining Gestures
        • 👆.sequenced()
          • ✨long press + drag
    • 🔰Presentations
      • 🔰Launch Screen
      • 🔰External Screens
      • 🔰Refreshable Views
      • 🔰Alert
      • 🎛️Confirmation Dialog
    • 🔰Debugging in SwiftUI
    • 🎹keyboard
    • 🔰for mac
    • 🚫deprecated
      • 🎁NavigationView
        • .navigationViewStyle(_:)
  • 🎛️widgets
  • 🎁Data Structures
    • Graph
      • Tree
  • 🧠Algorithms
    • Searching
      • Binary Search
    • Hashing
    • Sorting
      • sort using key paths
      • ranking list
      • Merge Sort
    • Filtering
    • Path Finding
      • A*
  • ⛱️Swift Playgrounds
    • Playground Book
      • Structuring Content
    • 檔案結構
      • 💾Manifest.plist
    • 使用模組
    • 📚Learn to Code 2
      • 型別
        • 🔸CharacterName
        • 🍄NodeWrapper
        • 👔ItemID
        • 🅿️Learn to Code 2 ⟩ Animatable
        • 🅿️Item
        • 🍄Actor
        • 🍄Expert
        • 🍄Portal
      • 關卡
        • Variables
          • 檢查相等值
          • 計算開關數量
          • 收集總數
        • Types
          • 開啟與關閉傳送門
          • 關閉傳送門
        • 創造世界
    • 編碼社群
    • Swift Playgrounds Subscription
  • 🥁Audio / Video
    • .speak()
    • Language Tags
  • ⛔Errors
    • ⛔CompileDylibError: Failed to build XXX.swift
    • ⛔Fatal error: String index is out of bounds
    • ❌Internal error: missingPackageDescriptionModule
    • ❌Argument type 'xxx' does not conform to expected type '_FormatSpecifiable'
    • ⛔️ escaping closure captures mutating 'self' parameter
    • ❓iPad/iPhone is Busy: Fetching debug symbols for ...
    • ❓Class _PointQueue is implemented in both ...
    • ⛔Protocol '...' can only be used as a generic constraint because it has Self or associated type
    • ⛔non-nominal type `...` cannot be extended
    • ⛔cannot assign value of type 'T' to type 'T'
  • 附錄
    • 🧩Swift Package
      • Package.swift
      • version number
      • Swift Package Index
      • 3rd party packages
    • 🔰Design Patterns
      • MVC
      • MVVM
      • DIP
    • 🛠️Xcode
      • 🔰build schemes
      • 🔧Instruments
      • 🤖Compiler Directives
        • @available, #available
        • #if ... #else ... #endif
        • #file, #line, #function
      • 🎹shortcuts
      • 🔰Documentation
        • 🔰DocC
      • Source Control
        • Merge
      • Preview
        • Preview Devices
      • App Icon
      • Simulator
    • 💼Projects
    • ✅Testing System
      • ✅Swift Testing
      • ✅XCTest
        • XCTAssertEqual (==)
        • XCTUnwrap
      • Fixtures
    • Prototyping
    • 💡Tips
      • iOS version
      • Swift version
    • JSON
      • Load JSON
    • Terms
      • reachability
    • 其他
      • 待解問題❓
      • 測試用 🧪
      • 關注對象
      • 重要語錄
      • 圖例
    • 雜記 📥
      • 📦Measurement
      • Replicating Types in Swift
      • 字型專有名詞
      • State Machine
Powered by GitBook
On this page
  • Views
  • Data Types
  • App Definition

Was this helpful?

  1. SwiftUI
  2. introduction

SwiftUI Essentials

⭐️

PreviousintroductionNextapp

Last updated 6 months ago

Was this helpful?

⟩ ⟩ SwiftUI Essentials

時間╱主題
程式碼

2:30 -

// declarative views
Text("Whiskers")
Image(systemName: "cat.fill")
Button("Give Treat") { /* action */ }

2:43 -

// layout (container view)
HStack {
   Label("Whiskers", systemImage: "cat.fill")
   Spacer()
   Text("Tightrope walking")
}

5:33 -

// container view (5:33)
HStack {
   Label("Whiskers", systemImage: "cat.fill")
   Spacer()
   Text("Tightrope walking")
}

7:53 -

PetRowView(pet: model.pet(named: "Whiskers"))
PetRowView(pet: model.pet(named: "Roofus"))
PetRowView(pet: model.pet(named: "Bubbles"))

Views

  • ContentView

  • PetRowView

  • RatingView

  • RatingContainerView

  • PetListView

struct ContentView: View {

    // view state
    @State private var pets = Pet.samplePets

    var body: some View {
        List(pets) { pet in        // scrollable list
            HStack {
                // 固定的內容
                Label("Whiskers", systemImage: "cat.fill")
                Spacer()
                Text("Tightrope walking")
            }
        }
    }
}
struct ContentView: View {

    // view state
    @State private var pets = Pet.samplePets

    var body: some View {
        List(pets) { pet in
            HStack {
                // 內容由 pet 決定
                Label(pet.name, systemImage: pet.kind.systemImage)
                Spacer()
                Text(pet.trick)
            }
        }
    }
}sw
struct ContentView: View {

    // view state
    @State private var pets = Pet.samplePets    

    var body: some View {
    
        // action button
        Button("Add Pet") {
            // imperative code (4:24)
            pets.append(Pet("Toby", kind: .dog, trick: "WWDC Presenter"))
        }

        // declarative views (2:30)
        List(pets) { pet in
            HStack {
                Label(pet.name, systemImage: pet.kind.systemImage)
                Spacer()
                Text(pet.trick)
            }
        }
        
    }// body
}
struct ContentView: View {
    var body: some View {
    
        // container view (5:41)
        HStack {                             
            Image(whiskers.profileImage)
            
            // container view (5:41)
            VStack(alignment: .leading) {    
                Label("Whiskers", systemImage: "cat.fill")
                Text("Tightrope walking")
            }
            
            Spacer()
        }
        
    }
}
struct ContentView: View {
    var body: some View {
        Image(whiskers.profileImage)
            .clipShape(.circle)        // view modifier
            .shadow(radius: 3)         // view modifier
            .overlay {                 // view modifier
                Circle().stroke(.green, lineWidth: 2)
            }
    }
}
struct ContentView: View {
    var model: PetStore
    var body: some View {
        List(model.allPets) { pet in    // List
            PetRowView(pet: pet)
        }
    }
}
struct ContentView: View {
    var model: PetStore
    var body: some View {
        List {
            ForEach(model.allPets) { pet in    // ForEach
                PetRowView(pet: pet)
            }
        }
    }
}
struct ContentView: View {
    var model: PetStore
    var body: some View {
        List {
            // ⭐️ List composition: sections
            Section("My Pets") {
                ForEach(model.myPets) { pet in
                    PetRowView(pet: pet)
                }
            }
            Section("Other Pets") {
                ForEach(model.otherPets) { pet in
                    PetRowView(pet: pet)
                }
            }
        }
    }
}
struct ContentView: View {

    var model: PetStore
    
    var body: some View {
        List {
            Section("My Pets") {
                ForEach(model.myPets) { pet in
                    row(pet: pet)
                }
            }
            Section("Other Pets") {
                ForEach(model.otherPets) { pet in
                    row(pet: pet)
                }
            }
        }
    }

    // ⭐️ private view prperty
    private func row(pet: Pet) -> some View {
        PetRowView(pet: pet)
            // ⭐️ row action 
            .swipeActions(edge: .leading) {
                Button("Award", systemImage: "trophy") {
                    pet.giveAward()
                }
                .tint(.orange)

                ShareLink(item: pet, preview: SharePreview("Pet", image: Image(pet.name)))
            }
    }
}
// PetRowView
struct PetRowView: View {
    var body: some View {
        HStack {
        
            Image(whiskers.profileImage)
                .clipShape(.circle)
                .shadow(radius: 3)
                .overlay {
                    Circle()
                        .stroke(.green, lineWidth: 2)
                }

            Text("Whiskers")

            Spacer()
        }
    }
}
// PetRowView (custom view)(7:24, 7:34)
struct PetRowView: View {

    var body: some View {
        HStack {                // container view (5:33)
            
            // ⭐️ pet image
            profileImage        // private view property (7:24)
 
            // pet name + trick
            VStack(alignment: .leading) {    // container view (5:41)
                Text("Whiskers")
                Text("Tightrope walking")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()
        }
    }

    // ⭐️ private view property (7:24)
    private var profileImage: some View {
        Image(whiskers.profileImage)
            .clipShape(.circle)        // view modifier (6:23)
            .shadow(radius: 3)         // view modifier
            .overlay {                 // view modifier
                Circle().stroke(.green, lineWidth: 2)
            }
    }
}
// PetRowView(pet: pet)
struct PetRowView: View {
    
    // ⭐️ input property
    var pet: Pet
    
    var body: some View {
        HStack {
        
            profileImage

            VStack(alignment: .leading) {
                Text(pet.name)
                Text(pet.trick)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()
        }
    }

    // private view property
    private var profileImage: some View {
        Image(pet.profileImage)
            .clipShape(.circle)
            .shadow(radius: 3)
            .overlay {
                Circle().stroke(pet.favoriteColor, lineWidth: 2)
            }
    }
}
struct PetRowView: View {

    var pet: Pet
    
    var body: some View {
        HStack {
            profileImage

            VStack(alignment: .leading) {
                HStack(alignment: .firstTextBaseline) {
                    Text(pet.name)

                    // ⭐️ conditional view
                    if pet.hasAward {
                        Image(systemName: "trophy.fill")
                            .foregroundStyle(.orange)
                    }
                }
                Text(pet.trick)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()
        }
    }

    private var profileImage: some View {
        Image(pet.profileImage)
            .clipShape(.circle)
            .shadow(radius: 3)
            .overlay {
                Circle().stroke(pet.favoriteColor, lineWidth: 2)
            }
    }
}
struct RatingView: View {

    // ⭐️ internal state
    @State var rating: Int = 5

    var body: some View {
        HStack {
        
            // ⭐️ button (-)
            Button("Decrease", systemImage: "minus.circle") {
                rating -= 1
            }
            .disabled(rating == 0)
            .labelStyle(.iconOnly)

            // ⭐️ 
            Text(rating, format: .number.precision(.integerLength(2)))
                .font(.title.bold())

            // ⭐️ button (+)
            Button("Increase", systemImage: "plus.circle") {
                rating += 1
            }
            .disabled(rating == 10)
            .labelStyle(.iconOnly)
        }
    }
}
struct RatingView: View {

    @State var rating: Int = 5

    var body: some View {
        HStack {
            Button("Decrease", systemImage: "minus.circle") {
                withAnimation {    // ⭐️ animation
                    rating -= 1
                }
            }
            .disabled(rating == 0)
            .labelStyle(.iconOnly)

            Text(rating, format: .number.precision(.integerLength(2)))
                .font(.title.bold())

            Button("Increase", systemImage: "plus.circle") {
                withAnimation {    // ⭐️ animation
                    rating += 1
                }
            }
            .disabled(rating == 10)
            .labelStyle(.iconOnly)
        }
    }
}
struct RatingView: View {

    @State var rating: Int = 5

    var body: some View {
        HStack {
            Button("Decrease", systemImage: "minus.circle") {
                withAnimation {
                    rating -= 1
                }
            }
            .disabled(rating == 0)
            .labelStyle(.iconOnly)

            Text(rating, format: .number.precision(.integerLength(2)))
                // ⭐️ text content transition
                .contentTransition(.numericText(value: Double(rating)))
                .font(.title.bold())

            Button("Increase", systemImage: "plus.circle") {
                withAnimation {
                    rating += 1
                }
            }
            .disabled(rating == 10)
            .labelStyle(.iconOnly)
        }
    }
}

struct RatingView: View {

    // ⭐️ external binding
    @Binding var rating: Int

    var body: some View {
        HStack {
            Button("Decrease", systemImage: "minus.circle") {
                withAnimation {
                    rating -= 1
                }
            }
            .disabled(rating == 0)
            .labelStyle(.iconOnly)

            Text(rating, format: .number.precision(.integerLength(2)))
                .contentTransition(.numericText(value: Double(rating)))
                .font(.title.bold())

            Button("Increase", systemImage: "plus.circle") {
                withAnimation {
                    rating += 1
                }
            }
            .disabled(rating == 10)
            .labelStyle(.iconOnly)
        }
    }
}
struct RatingContainerView: View {

    // ⭐️ internal state
    @State private var rating: Int = 5

    var body: some View {
        Gauge(value: Double(rating), in: 0...10) {
            Text("Rating")
        }
        RatingView()
    }
}
struct PetListView: View {

    // ⭐️ 
    @Bindable var viewModel: PetStoreViewModel

    var body: some View {
        List {
            Section("My Pets") {
                ForEach(viewModel.myPets) { pet in
                    row(pet: pet)
                }
            }
            Section("Other Pets") {
                ForEach(viewModel.otherPets) { pet in
                    row(pet: pet)
                }
            }
        }
        // ⭐️ searchable
        .searchable(text: $viewModel.searchText)
    }

    private func row(pet: Pet) -> some View {
        PetRowView(pet: pet)
            .swipeActions(edge: .leading) {
                Button("Reward", systemImage: "trophy") {
                    pet.giveAward()
                }
                .tint(.orange)

                ShareLink(item: pet, preview: SharePreview("Pet", image: Image(pet.name)))
            }
    }
}
struct PetListView: View {

    @Bindable var viewModel: PetStoreViewModel

    var body: some View {
        List {
            Section("My Pets") {
                ForEach(viewModel.myPets) { pet in
                    row(pet: pet)
                }
            }
            Section("Other Pets") {
                ForEach(viewModel.otherPets) { pet in
                    row(pet: pet)
                }
            }
        }
        // ⭐️ searchable: customization
        .searchable(text: $viewModel.searchText, editableTokens: $viewModel.searchTokens) { $token in
            Label(token.kind.name, systemImage: token.kind.systemImage)
        }
        // ⭐️ searchable: customization
        .searchScopes($viewModel.searchScope) {
            Text("All Pets").tag(PetStoreViewModel.SearchScope.allPets)
            Text("My Pets").tag(PetStoreViewModel.SearchScope.myPets)
            Text("Other Pets").tag(PetStoreViewModel.SearchScope.otherPets)
        }
        // ⭐️ searchable: customization
        .searchSuggestions {
            PetSearchSuggestions(viewModel: viewModel)
        }
    }

    private func row(pet: Pet) -> some View {
        PetRowView(pet: pet)
            .swipeActions(edge: .leading) {
                Button("Reward", systemImage: "trophy") {
                    pet.giveAward()
                }
                .tint(.orange)

                ShareLink(item: pet, preview: SharePreview("Pet", image: Image(pet.name)))
            }
    }
}

Data Types

  • Pet

  • PetStore

  • PetStoreViewModel

// ⭐️ whiskers (global constant)
let whiskers = Pet("Whiskers", kind: .cat, trick: "Tightrope walking", profileImage: "Whiskers")

// ⭐️ Pet
struct Pet: Identifiable {

    // -------- ⭐️ Pet.Kind --------
    enum Kind {
    
        // enum cases
        case cat
        case dog
        case fish
        case bird
        case lizard
        case turtle
        case rabbit
        case bug

        // ⭐️ pet.kind.systemImage
        var systemImage: String {
            switch self {
                case .cat: return "cat.fill"
                case .dog: return "dog.fill"
                case .fish: return "fish.fill"
                case .bird: return "bird.fill"
                case .lizard: return "lizard.fill"
                case .turtle: return "tortoise.fill"
                case .rabbit: return "rabbit.fill"
                case .bug: return "ant.fill"
            }
        }
        
    }// enum Kind

    // -------- pet properties --------
    let id = UUID()            // pet.id ⭐️ 
    var name: String           // pet.name
    var kind: Kind             // pet.kind
    var trick: String          // pet.trick
    var profileImage: String   // pet.profileImage

    // -------- init --------
    // ⭐️ Pet("name", .cat, trick: "trick", profileImage: "imageName")
    init(_ name: String, kind: Kind, trick: String, profileImage: String) {
        self.name = name
        self.kind = kind
        self.trick = trick
        self.profileImage = profileImage
    }
}
import SwiftUI    // for Color ⭐️

// Pet
struct Pet: Identifiable {

    enum Kind {
    
        case cat
        case dog
        case fish
        case bird
        case lizard
        case turtle
        case rabbit
        case bug

        var systemImage: String {
            switch self {
                case .cat: return "cat.fill"
                case .dog: return "dog.fill"
                case .fish: return "fish.fill"
                case .bird: return "bird.fill"
                case .lizard: return "lizard.fill"
                case .turtle: return "tortoise.fill"
                case .rabbit: return "rabbit.fill"
                case .bug: return "ant.fill"
            }
        }
    }

    let id = UUID()
    var name: String
    var kind: Kind
    var trick: String
    var profileImage: String
    var favoriteColor: Color    // ⭐️ new prperty (7:41)

    // ⭐️ new initializer (7:41)
    init(
        _ name: String, 
        kind: Kind, 
        trick: String, 
        profileImage: String, 
        favoriteColor: Color    // ⭐️ new prperty (7:41)
    ) {
        self.name = name
        self.kind = kind
        self.trick = trick
        self.profileImage = profileImage
        self.favoriteColor = favoriteColor
    }
}
@Observable
class Pet: Identifiable {

    // Pet.Kind
    enum Kind {
    
        case cat
        case dog
        case fish
        case bird
        case lizard
        case turtle
        case rabbit
        case bug

        var systemImage: String {
            switch self {
                case .cat: return "cat.fill"
                case .dog: return "dog.fill"
                case .fish: return "fish.fill"
                case .bird: return "bird.fill"
                case .lizard: return "lizard.fill"
                case .turtle: return "tortoise.fill"
                case .rabbit: return "rabbit.fill"
                case .bug: return "ant.fill"
            }
        }
    }

    var name: String
    var kind: Kind
    var trick: String
    var profileImage: String
    var favoriteColor: Color
    var hasAward: Bool = false    // ⭐️ new prperty (9:31)

    init(_ name: String, kind: Kind, trick: String, profileImage: String, favoriteColor: Color) {
        self.name = name
        self.kind = kind
        self.trick = trick
        self.profileImage = profileImage
        self.favoriteColor = favoriteColor
    }

    // ⭐️ new method (9:31)
    func giveAward() {
        hasAward = true
    }
}

// ⭐️ 
extension Pet: Transferable {
    static var transferRepresentation: some TransferRepresentation {
        ProxyRepresentation { $0.name }
    }
}

// 7:59, 8:14
@Observable
class PetStore {
    var allPets: [Pet] = [
        Pet("Whiskers", kind: .cat, trick: "Tightrope walking", profileImage: "Whiskers", favoriteColor: .green),
        Pet("Roofus", kind: .dog, trick: "Home runs", profileImage: "Roofus", favoriteColor: .blue),
        Pet("Bubbles", kind: .fish, trick: "100m freestyle", profileImage: "Bubbles", favoriteColor: .orange),
        Pet("Mango", kind: .bird,  trick: "Basketball dunk", profileImage: "Mango", favoriteColor: .green),
        Pet("Ziggy", kind: .lizard, trick: "Parkour", profileImage: "Ziggy", favoriteColor: .purple),
        Pet("Sheldon", kind: .turtle, trick: "Kickflip", profileImage: "Sheldon", favoriteColor: .brown),
        Pet("Chirpy", kind: .bug, trick: "Canon in D", profileImage: "Chirpy", favoriteColor: .orange)
    ]
}
// 8:27, 9:31
@Observable
class PetStore {
    
    var myPets: [Pet] = [
        Pet("Roofus", kind: .dog, trick: "Home runs", profileImage: "Roofus", favoriteColor: .blue),
        Pet("Sheldon", kind: .turtle, trick: "Kickflip", profileImage: "Sheldon", favoriteColor: .brown),
    ]

    var otherPets: [Pet] = [
        Pet("Whiskers", kind: .cat, trick: "Tightrope walking", profileImage: "Whiskers", favoriteColor: .green),
        Pet("Bubbles", kind: .fish, trick: "100m freestyle", profileImage: "Bubbles", favoriteColor: .orange),
        Pet("Mango", kind: .bird,  trick: "Basketball dunk", profileImage: "Mango", favoriteColor: .green),
        Pet("Ziggy", kind: .lizard, trick: "Parkour", profileImage: "Ziggy", favoriteColor: .purple),
        Pet("Chirpy", kind: .bug, trick: "Canon in D", profileImage: "Chirpy", favoriteColor: .orange)
    ]
}
@Observable
class PetStoreViewModel {

    var petStore: PetStore
    var searchText: String = ""

    init(petStore: PetStore) {
        self.petStore = petStore
    }

    var myPets: [Pet] {
        // For illustration purposes only. The filtered pets should be cached.
        petStore.myPets.filter { searchText.isEmpty || $0.name.contains(searchText) }
    }
    var otherPets: [Pet] {
        // For illustration purposes only. The filtered pets should be cached.
        petStore.otherPets.filter { searchText.isEmpty || $0.name.contains(searchText) }
    }
}

App Definition

@main
struct SwiftUIEssentialsApp: App {
    var body: some Scene {
        // ⭐️ app definition
        WindowGroup {
            ContentView()
        }
    }
}
@main
struct SwiftUIEssentialsApp: App {
    var body: some Scene {
        
        // ⭐️ multiple scenes
        WindowGroup {
            ContentView()
        }

        // ⭐️ multiple scenes
        WindowGroup("Training History", id: "history", for: TrainingHistory.ID.self) { $id in
            TrainingHistoryView(historyID: id)
        }

        // ⭐️ multiple scenes
        WindowGroup("Pet Detail", id: "detail", for: Pet.ID.self) { $id in
            PetDetailView(petID: id)
        }
   }
}
struct ScoreboardWidget: Widget {
    var body: some WidgetConfiguration {
        // ...
    }
}

struct ScoreboardWidgetView: View {

    var petTrick: PetTrick
    
    var body: some View {
        ScoreCard(rating: petTrick.rating)
            .overlay(alignment: .bottom) {
                Text(petTrick.pet.name)
                    .padding()
            }
            .widgetURL(petTrick.pet.url)
    }
}
ScoreCardStack(rating: $rating)
   .focusable()
   #if os(watchOS)
   .digitalCrownRotation($rating, from: 0, through: 10)
   #endif

2:30 -

tab

2:43 -

tab

2:56 -

, tabs

3:07 -

, tabs

4:24 -

, tabs

5:33 -

tab

5:41 -

, tabs

6:23 -

, tabs

7:14 -

, tabs

7:20 -

, tabs

7:24 -

, tabs

7:34 -

tab

7:41 -

7:53 -

(WWDC2024)

10:57 -

11:51 -

12:05 -

12:45 -

12:22 - 12:45 -

15:19 -

15:20 -

15:19 -

16:58 -

17:15 -

17:23 -

19:37 -

🔰
🔰
SwiftUI Essentials
State changes
State changes: animation
State changes: text content transition
State changes: state and binding
State changes: multiple state
State changes: state and binding
Searchable
Searchable: customization
Searchable
App definition
App definition: multiple scenes
Widgets
Digital Crown rotation
Declarative views
Declarative views: layout
Declarative views: list
Declarative views: list
Declarative and imperative programming
Layout container
Container views
View modifiers
Custom views
Custom views: iteration
Custom views: view properties
Custom views: complete row view
Custom views: input properties
Custom views: reuse
👉
2:30
👉
2:43
👉
Pet
ContentView
👉
Pet
ContentView
👉
Pet
ContentView
👉
5:33
👉
Pet
ContentView
👉
Pet
ContentView
👉
PetRowView
Pet
👉
PetRowView
Pet
👉
PetRowView
Pet
👉
PetRowView
SwiftUI
intro
Declarative views
Declarative views: layout
Layout container
Custom views: reuse
SwiftUI Esssentials (WWDC2024)