✨views with same width

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

// ⭐️ 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)
    }
}

// 🌅 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
        }
        
    }
}

修改紀錄

2020.10.13： ➖ 🌅 SizeReporter ➕ 🌀View + report(width: key)
2020.10.14： ✏️ 微修改，讓語義更通順。 ✏️ view.report(width: key) -> view.reportWidth(to: key) ➕ view.reportFrame(to: key, in: space)
2020.10.15： ✏️ MaxWidth 改為 generic MaxValue<T: FloatingPoint>

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())

PreviousPreferences ⟩ examples Next.reportWidth() ...

Last updated 3 years ago

Was this helpful?

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())