👔HeightDimension

👔 HeightDimension

⬆️ 需要： WidthDimension

// 2022.02.13
import SwiftUI

struct HeightDimension: View {
    // view properties
    var label: Color = .primary
    var arrow: Color = .secondary
    // view body
    var body: some View {
        GeometryReader { geo in 
            // ⭐️ interchange width/height
            let w = geo.size.height
            let h = geo.size.width
            // ⭐️ use WidthDimension & rotate it
            WidthDimension(label: label, arrow: arrow)
                // interchange width/height (⭐️ origin unchanged)
                .frame(width: w, height: h)
                // ⭐️ rotate 90 degrees
                .rotationEffect(.degrees(90), anchor: .zero)
                // ⭐️ move it to where it should be
                .offset(x: h)
        }.frame(width: 25)    // ⭐️⭐️⭐️ 這裡指定「寬度」很重要❗️
    }
}

⬆️ 需要

• WidthDimension

⬇️ 應用

• .dimension()

👥 相關

• uses WidthDimension.

• used by .dimension().

📗 參考

• Thinking in SwiftUI ⟩ Ch.4 Layout ⟩ Grid Views ⭐️

History

history

1. (2020.01.27) used UpArrow.

1

⬆️ 需要： UpArrow

struct HeightDimension: View {
    // view properties
    var label: Color = .primary
    var arrow: Color = .secondary
    // view body
    var body: some View {
        // ⭐️ 使用 GeometryReader 來讀取「高度」
        GeometryReader { geo in 
            let height = geo.size.height
            VStack{
                UpArrow(color: arrow)
                Text("\(height, specifier: "%.0f")")  // ⭐️ no decimal places
                    .font(.system(size: 14)).bold()
                    .foregroundColor(label)
                    .fixedSize()                      // ⭐️ no wrap
                UpArrow(color: arrow)
                    .scaleEffect(-1, anchor: .center) // ⭐️ turn around
            }
        }.frame(width: 25)    // ⭐️⭐️⭐️ 這裡指定「寬度」很重要❗️ 
    }                         // 不然 GeometryReader 會佔滿整個空間，
}                             // 造成外界使用 overlay 時對齊無效❗️