✨dynamic underline

同一條底線，可以在不同的文字下面遊走。這個例子只用到 @State 變數，並沒有用到 PreferenceKey。

在 Text 上面覆蓋 (overlay) 一個「透明的按鈕」，按下後會回報自己的 frame 給 parent view 的 @State 變數 (buttonFrame)，parent view 再根據這個資料去更新底線的位置。
因為這個例子是按下按鈕後，才會通知 parent view 做更新，並不是一開始佈局 (layout) 的時候就需要決定底線的位置，所以並不需要用到 🅿️ PreferenceKey 。
當然，這個例子也可以用像「💈 動態框線」一樣的方法，一開始佈局的時候就把所有 Text 的 frame 全部記錄下來 (這時就要用到 🅿️ PreferenceKey)，然後再動態決定底線的位置。

/*
 What is Geometry Reader in SwiftUI?
 https://stackoverflow.com/a/56729880/5409815
 
 How to make view the size of another view in SwiftUI
 https://stackoverflow.com/a/61708675/5409815
 */

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    // view body
    var body: some View {
        Tabs()   // 🌅 Tabs
            .shadow(color: .black, radius: 6, x: 6, y: 6)
    }
}

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

// 🌅 Tabs
struct Tabs: View {
    
    // ⭐️ 存放目前按下按鈕的 frame (在參考座標系 "container" 中)
    @State private var currentFrame: CGRect = .zero
    
    // ⭐️ 畫底線
    func underline(_ color: Color = .orange) -> some View {
        color
            // ⭐️ 1. 使用回報的 width。
            .frame(width: currentFrame.width, height: 2)
            // ⭐️ 2 將 `underline` 向右推，對齊 `currentFrame` 的前沿。
            .padding(.leading, currentFrame.minX)
    }
    
    // view body
    var body: some View {
        
        HStack {
            // 🌅 MyButton
            // ⭐️ 1. 放 `MyButton`，按一下就會回報自己的 frame。
            //    2. 設定回報在 "container" 中的座標。
            MyButton(clickToReport: $currentFrame, label: "Tweets", in: "container")
            MyButton(clickToReport: $currentFrame, label: "Tweets & Replies", in: "container")
            MyButton(clickToReport: $currentFrame, label: "Media", in: "container")
            MyButton(clickToReport: $currentFrame, label: "Likes", in: "container")
        }// HStack (container)
            
            // ⭐️ 3. 定義 "container" 座標系統。
            .coordinateSpace(name: "container")
            // ⭐️ 4. 放 `underline`，對齊左下角。
            .overlay(underline(.yellow), alignment: .bottomLeading)
            
            .padding().background(Color.gray)
            .animation(.spring())
    }
    
}

// 🌅 MyButton
//   按下按鈕時，會回報自己在參考座標系中的 frame
struct MyButton: View {
    
    // ⭐️ send `MyButton`'s frame back to parent view
    @Binding var buttonFrame: CGRect
    
    // local variables
    let label: String           // 按鈕文字
    let space: CoordinateSpace  // `buttonFrame` 的參考座標系
    
    // init
    init(clickToReport frame: Binding<CGRect>, label: String, in space: CoordinateSpace = .global) {
        self._buttonFrame = frame
        self.label  = label
        self.space = space
    }
    
    init(clickToReport frame: Binding<CGRect>, label: String, in spaceName: String) {
        self._buttonFrame = frame
        self.label  = label
        self.space = .named(spaceName)
    }
    
    // view body
    var body: some View {
        // ⭐️ 1. 先用 Text 定義 frame 的大小
        Text(label)
            // ⭐️ 2. 在 Text 前面放一個透明的 Button
            .overlay(GeometryReader { geo in
                Button(action: {
                    // ⭐️ 3. 設定按下按鈕時，會回報自己在參考座標系中的 frame
                    self.buttonFrame = geo.frame(in: self.space)
                }, label:  { Color.clear })  // 透明色
            })
    }
}

Previousinit State NextBinding

Last updated 2 years ago

/* What is Geometry Reader in SwiftUI? https://stackoverflow.com/a/56729880/5409815 How to make view the size of another view in SwiftUI https://stackoverflow.com/a/61708675/5409815 */ import SwiftUI import PlaygroundSupport struct ContentView: View { // view body var body: some View { Tabs() // 🌅 Tabs .shadow(color: .black, radius: 6, x: 6, y: 6) } } // live view PlaygroundPage.current.setLiveView(ContentView())

// 🌅 Tabs struct Tabs: View { // ⭐️ 存放目前按下按鈕的 frame (在參考座標系 "container" 中) @State private var currentFrame: CGRect = .zero // ⭐️ 畫底線 func underline(_ color: Color = .orange) -> some View { color // ⭐️ 1. 使用回報的 width。 .frame(width: currentFrame.width, height: 2) // ⭐️ 2 將 `underline` 向右推，對齊 `currentFrame` 的前沿。 .padding(.leading, currentFrame.minX) } // view body var body: some View { HStack { // 🌅 MyButton // ⭐️ 1. 放 `MyButton`，按一下就會回報自己的 frame。 // 2. 設定回報在 "container" 中的座標。 MyButton(clickToReport: $currentFrame, label: "Tweets", in: "container") MyButton(clickToReport: $currentFrame, label: "Tweets & Replies", in: "container") MyButton(clickToReport: $currentFrame, label: "Media", in: "container") MyButton(clickToReport: $currentFrame, label: "Likes", in: "container") }// HStack (container) // ⭐️ 3. 定義 "container" 座標系統。 .coordinateSpace(name: "container") // ⭐️ 4. 放 `underline`，對齊左下角。 .overlay(underline(.yellow), alignment: .bottomLeading) .padding().background(Color.gray) .animation(.spring()) } }

// 🌅 MyButton // 按下按鈕時，會回報自己在參考座標系中的 frame struct MyButton: View { // ⭐️ send `MyButton`'s frame back to parent view @Binding var buttonFrame: CGRect // local variables let label: String // 按鈕文字 let space: CoordinateSpace // `buttonFrame` 的參考座標系 // init init(clickToReport frame: Binding<CGRect>, label: String, in space: CoordinateSpace = .global) { self._buttonFrame = frame self.label = label self.space = space } init(clickToReport frame: Binding<CGRect>, label: String, in spaceName: String) { self._buttonFrame = frame self.label = label self.space = .named(spaceName) } // view body var body: some View { // ⭐️ 1. 先用 Text 定義 frame 的大小 Text(label) // ⭐️ 2. 在 Text 前面放一個透明的 Button .overlay(GeometryReader { geo in Button(action: { // ⭐️ 3. 設定按下按鈕時，會回報自己在參考座標系中的 frame self.buttonFrame = geo.frame(in: self.space) }, label: { Color.clear }) // 透明色 }) } }