🍎
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

Was this helpful?

  1. SwiftUI
  2. data flow
  3. Preferences
  4. Preferences ⟩ examples

views with same width

PreviousPreferences ⟩ examplesNext.reportWidth() ...

Last updated 3 years ago

Was this helpful?

利用 來對齊本來寬度不同的 。

// ⭐️ PreferenceKey:
//    1. 準備接收所有 Text 的最大寬度。
typealias MaxWidth = MaxValue<CGFloat>  // 📦 MaxValue<T: FloatingPoint>

// live view
struct ContentView: View {
    var body: some View {
        VStack {
            MyForm()                     // 🌅 MyForm
            Color.pink.cornerRadius(12)
        }
            .padding()
            .background(Color.gray)
            .cornerRadius(16)
            .shadow(color: .black, radius: 6, x: 6, y: 6)
    }
}

這時最好是:

  1. child view 事先用 parent view 的 @State 變數設定自己的尺寸

  2. 再由 parent view 透過 .onPreferenceChange() 來主動更新它的 @State 變數,然後帶動 child view 的更新。

// 🌅 MyForm
struct MyForm: View {
    
    @State var value1 = ""
    @State var value2 = ""
    @State var value3 = ""
    
    // ⭐️ label 的統一寬度
    @State private var labelWidth: CGFloat?
    
    var body: some View {
        
        Form {
            // 🌅 MyTextField
            MyTextField(
                labelWidth : $labelWidth,   // 承接來自母物件的「統一寬度」
                label      : "姓名", 
                placeholder: "請輸入您的名字", 
                text       : $value1
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電話", 
                placeholder: "0900-000-123", 
                text       : $value2
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電子信箱", 
                placeholder: "email@company.com", 
                text       : $value3
            )
        }// Form
            .cornerRadius(12)
            // ⭐️ 2. 母物件根據回報的寬度,準備更新自己的 labelWidth
            .onPreferenceChange(MaxWidth.self) { self.labelWidth = $0 }
    }
}
// 🌅 MyTextField
// -----------------------------------------------------------
// 主功能:
// 1. 會向 `MaxWidth` (PreferenceKey) 報告自己 label 的寬度。
// 2. 設定自己 label 的寬度為 `labelWidth` (⭐️ 來自 parent view)。
//    (剛開始為 nil,表示不強制設定寬度,由 label 自己決定寬度)
// 3. 只要來自 parent view 的 `labelWidth` 更新了,自己就會跟著更新。
// -----------------------------------------------------------
struct MyTextField: View {
    
    @Binding var labelWidth: CGFloat?  // label's width (⭐️ 由 parent @State 決定)
    @Binding var text      : String    // text field's content (⭐️ 同上)
    
    let label      : String          // text field's label
    let placeholder: String          // text field's placeholder
    
    init(labelWidth: Binding<CGFloat?>, label: String, placeholder: String, text: Binding<String>) {
        self._labelWidth = labelWidth
        self._text = text
        self.label = label
        self.placeholder = placeholder
    }
    
    var body: some View {
        HStack {
            
            // label
            Text(label)
                // ⭐️ 3. 向 MaxWidth 回報自己的寬度
                .reportWidth(to: MaxWidth.self)      // 🌀View + pref, 📦 MaxWidth
                // 設定尺寸與靠右對齊
                .frame(width: labelWidth, alignment: .trailing)
                
            // text field
            TextField(placeholder, text: $text)
                .style(.rounded)                     // 🌀TextField + style
        }
        
    }
}
  • Preferences

修改紀錄

import SwiftUI
import PlaygroundSupport

// 📦 MaxWidth
struct MaxWidth: PreferenceKey {
    // default value (nil == not set)
    static let defaultValue: CGFloat? = nil
    // ⭐️ choose max width
    static func reduce(value: inout CGFloat?, nextValue: () -> CGFloat?) {
        if let next = nextValue() {
            value = max(next , value ?? 0)  
        }
    }
}

// 🌅 SizeReporter
struct SizeReporter: View {
    var body: some View {
        GeometryReader { geo in  // ⭐️ 1. read Text's size
            Color.clear
                // ⭐️ 2. set preference:
                //       tell parent view its preferred width
                //  - 🌀GeometryProxy + 🅿️ Rectangular
                .preference(key: MaxWidth.self, value: geo.width)
        }
    }
}

// 🌅 TextFieldWithPreference
struct TextFieldWithPreference: View {
    
    @Binding var width: CGFloat?  // label's preferred width ⭐️ 
    @Binding var text : String    // text field's content
    
    let label: String             // text field's label
    let placeholder: String       // text field's placeholder
    
    init(_ width: Binding<CGFloat?>, label: String, placeholder: String, text: Binding<String>) {
        self._width = width
        self._text  = text
        self.label   = label
        self.placeholder = placeholder
    }
    
    var body: some View {
        HStack {
            // label
            Text(label)
                // ⭐️ 1. report size to parent
                .background(SizeReporter())
                // ⭐️ 2. set optional width ⭐️ 3. set alignment
                .frame(width: width, alignment: .trailing)
                
            // text field
            TextField(placeholder, text: $text)
                .style(.rounded)                  // 🌀TextField + style
        }
        
    }
}

// 🌅 MyForm
struct MyForm: View {
    
    @State var value1 = ""
    @State var value2 = ""
    @State var value3 = ""
    
    // textfield label's preferred width
    @State private var width: CGFloat?
    
    var body: some View {
        
        Form {
            TextFieldWithPreference($width, label: "First Item", placeholder: "Enter first item", text: $value1)
            TextFieldWithPreference($width, label: "Second Item", placeholder: "Enter second item", text: $value2)
            TextFieldWithPreference($width, label: "Third Item", placeholder: "Enter third item", text: $value3)
        }// Form
            .cornerRadius(12)
            .onPreferenceChange(MaxWidth.self) { self.width = $0 }
    }
}

struct ContentView: View {
    var body: some View {
        MyForm()
            .padding()
            .background(Color.gray)
            .cornerRadius(16)
            .shadow(color: .black, radius: 6, x: 6, y: 6)
    }
}

// live view
PlaygroundPage.current.setLiveView(ContentView())
import SwiftUI
import PlaygroundSupport

// 📦 MaxWidth
public struct MaxWidth: PreferenceKey {
    // default value (nil == not set)
    public static let defaultValue: CGFloat? = nil
    // ⭐️ choose max width
    public static func reduce(value: inout CGFloat?, nextValue: () -> CGFloat?) {
        if let next = nextValue() {
            value = max(next , value ?? 0)  
        }
    }
}

// 🌅 MyTextField
// -----------------------------------------------------------
// 主功能:
// 1. 會向 `MaxWidth` (PreferenceKey) 報告自己 label 的寬度。
// 2. 設定自己 label 的寬度為 `labelWidth` (⭐️ 來自 parent view)。
//    (剛開始為 nil,表示不強制設定寬度,由 label 自己決定寬度)
// 3. 只要來自 parent view 的 `labelWidth` 更新了,自己就會跟著更新。
// -----------------------------------------------------------
struct MyTextField: View {
    
    @Binding var labelWidth: CGFloat?  // label's width (⭐️ 由 parent @State 決定)
    @Binding var text      : String    // text field's content (⭐️ 同上)
    
    let label      : String          // text field's label
    let placeholder: String          // text field's placeholder
    
    init(labelWidth: Binding<CGFloat?>, label: String, placeholder: String, text: Binding<String>) {
        self._labelWidth = labelWidth
        self._text = text
        self.label = label
        self.placeholder = placeholder
    }
    
    var body: some View {
        HStack {
            
            // label
            Text(label)
                // ⭐️ 1. report text's width to `MaxWidth` PreferenceKey
                //       (wait for parent to update its `maxWidth`)
                .reportWidth(to: MaxWidth.self)      // 🌀View + report, 📦 MaxWidth
                // ⭐️ 2. set width with `labelWidth`(optional), and alignment
                .frame(width: labelWidth, alignment: .trailing)
                
            // text field
            TextField(placeholder, text: $text)
                .style(.rounded)                     // 🌀TextField + style
        }
        
    }
}

// 🌅 MyForm
struct MyForm: View {
    
    @State var value1 = ""
    @State var value2 = ""
    @State var value3 = ""
    
    // ⭐️ textfield label's width
    @State private var labelWidth: CGFloat?
    
    var body: some View {
        
        Form {
            // 🌅 MyTextField
            // ⭐️ 1. report width to `MaxWidth`
            //    2. set label's width to `labelWidth`
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "姓名", 
                placeholder: "請輸入您的名字", 
                text       : $value1
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電話", 
                placeholder: "0900-000-123", 
                text       : $value2
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電子信箱", 
                placeholder: "email@company.com", 
                text       : $value3
            )
        }// Form
            .cornerRadius(12)
            // ⭐️ 3. parent view responses to preference change
            //       (update its `labelWidth`)
            .onPreferenceChange(MaxWidth.self) { self.labelWidth = $0 }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            MyForm()                     // 🌅 MyForm
            Color.pink.cornerRadius(12)
        }
            .padding()
            .background(Color.gray)
            .cornerRadius(16)
            .shadow(color: .black, radius: 6, x: 6, y: 6)
    }
}

// live view
PlaygroundPage.current.setLiveView(ContentView())
import SwiftUI
import PlaygroundSupport

/*
 * ⭐️ 使用 K: PreferenceKey 的三大要素
 *    1. PreferenceKey 本身
 *    2. parent view 的 @State 變數:通常型別與 K.Value 相同
 *    3. child view 的 @Binding 變數:可以承接來自 parent view 的更新通知。
 * 
 * ⭐️ 處理過程三部曲:
 *    1. 由子物件回報值給 K:用 child.preference(key:value:) 回報
 *    2. 由 K 負責處理回報的值:用 K.reduce() 處理
 *    3. 由母物件根據回報的值,更新自己的 @State:用 parent.onPreferenceChange() 處理
 *
 *    子物件回報 --> PreferenceKey 處理 --> 母物件更新
 */

// ⭐️ 所有 Text 的最大寬度
typealias MaxWidth = MaxValue<CGFloat>  // 📦 MaxValue<T: FloatingPoint>


// 🌅 MyTextField
// -----------------------------------------------------------
// 主功能:
// 1. 會向 `MaxWidth` (PreferenceKey) 報告自己 label 的寬度。
// 2. 設定自己 label 的寬度為 `labelWidth` (⭐️ 來自 parent view)。
//    (剛開始為 nil,表示不強制設定寬度,由 label 自己決定寬度)
// 3. 只要來自 parent view 的 `labelWidth` 更新了,自己就會跟著更新。
// -----------------------------------------------------------
struct MyTextField: View {
    
    @Binding var labelWidth: CGFloat?  // label's width (⭐️ 由 parent @State 決定)
    @Binding var text      : String    // text field's content (⭐️ 同上)
    
    let label      : String          // text field's label
    let placeholder: String          // text field's placeholder
    
    init(labelWidth: Binding<CGFloat?>, label: String, placeholder: String, text: Binding<String>) {
        self._labelWidth = labelWidth
        self._text = text
        self.label = label
        self.placeholder = placeholder
    }
    
    var body: some View {
        HStack {
            
            // label
            Text(label)
                // ⭐️ 1. 向 MaxWidth 回報自己的寬度
                .reportWidth(to: MaxWidth.self)      // 🌀View + pref, 📦 MaxWidth
                // ⭐️ 2. 承接來自母物件的 labelWidth (optional),並設定尺寸
                // ⭐️ 3. 設定靠右
                .frame(width: labelWidth, alignment: .trailing)
                
            // text field
            TextField(placeholder, text: $text)
                .style(.rounded)                     // 🌀TextField + style
        }
        
    }
}

// 🌅 MyForm
struct MyForm: View {
    
    @State var value1 = ""
    @State var value2 = ""
    @State var value3 = ""
    
    // ⭐️ TextField 的統一寬度 (三部曲:由子視件回報,MaxWidth 處理,母視件更新)
    @State private var labelWidth: CGFloat?
    
    var body: some View {
        
        Form {
            // 🌅 MyTextField
            MyTextField(
                labelWidth : $labelWidth,   // 承接來自母物件的「統一寬度」
                label      : "姓名", 
                placeholder: "請輸入您的名字", 
                text       : $value1
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電話", 
                placeholder: "0900-000-123", 
                text       : $value2
            )
            MyTextField(
                labelWidth : $labelWidth, 
                label      : "電子信箱", 
                placeholder: "email@company.com", 
                text       : $value3
            )
        }// Form
            .cornerRadius(12)
            // ⭐️ 3. 母物件根據回報的寬度,更新自己的 labelWidth
            .onPreferenceChange(MaxWidth.self) { self.labelWidth = $0 }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            MyForm()                     // 🌅 MyForm
            Color.pink.cornerRadius(12)
        }
            .padding()
            .background(Color.gray)
            .cornerRadius(16)
            .shadow(color: .black, radius: 6, x: 6, y: 6)
    }
}

// live view
PlaygroundPage.current.setLiveView(ContentView())

當一開始在佈局 (layout) 的時候,就要修改 child view 的尺寸的話,通常不能在 child view 的 中直接修改 parent view 的 @State 變數。 👉

使用 ,讓 child view 間接告訴 parent view 它要的尺寸是什麼

+

⭐️

- AppCoda

- The SwiftUI Lab

2020.10.13: ➖ 🌅 SizeReporter ➕

2020.10.14: ✏️ 微修改,讓語義更通順。 ✏️ view.report(width: key) -> ➕ view.reportFrame(to: key, in: space)

2020.10.15: ✏️ MaxWidth 改為 generic

🔰
🚦
🚥
✨
✨
🌅 GeometryReader
SwiftUI GeometryReader failed to update its parent's state
🅿️ PreferenceKey
🌀 TextField + style
🌀 GeometryProxy
🅿️ Rectangular
🎛️ TextField
🌀View + report
🅿️ PreferenceKey
透過 PreferenceKey 簡單對齊視圖
Inspecting the View Tree – Part 1: PreferenceKey
🌀View + report(width: key)
view.reportWidth(to: key)
MaxValue<T: FloatingPoint>
PreferenceKey
TextField