.dimension()

SwiftUI ⟩ Views ⟩ View ⟩ .dimension() ⟩

• 使用自製工具 view.dimension() 來標示一個視圖的長寬。

• 長寬標示的位置可用 DimensionPositions 來指定。

💈範例

struct PlayView: View {
    
    // view body
    var body: some View {
        HStack(spacing: 50) {
            colorBlock(.pink)
                // ⭐️ 指定標示位置為「前方」與「垂直中央」
                .dimension([.leading, .vcenter])
            colorBlock(pacificBlue)
                // ⭐️ 改變數字的顏色
                .dimension([.hcenter, .bottom], label: .yellow)
            colorBlock(.purple)
                // ⭐️ 改變箭頭的顏色
                .dimension(.bottomTrailing, arrow: .blue)
        }
    }
    
    /// color block
    func colorBlock(_ color: Color) -> some View {
        color
            .frame(width: 200, height: 100)
            .border(Color.primary)
    }
}

🌀.dimension()

⬆️ 需要： DimensionPositions, WidthDimension, HeightDimension

extension View {
    func dimension(
        //           ╭──👔 OptionSet──╮ 
        _ positions: DimensionPositions = [.bottom],   // ⭐️ 標示的位置
        arrow: Color = .secondary,                     // ⭐️ 箭頭顏色
        label: Color = .primary                        // ⭐️ 數字顏色
    ) -> some View 
    {
        overlay(alignment: .top) {
            // 👔 DimensionPositions
            if positions.contains(.top) {
                // 👔 WidthDimension
                WidthDimension(label: label, arrow: arrow).offset(y: -25)
            }
        }
        .overlay(alignment: .bottom){
            if positions.contains(.bottom){
                WidthDimension(label: label, arrow: arrow).offset(y: 25)
            }
        }
        .overlay {
            if positions.contains(.vcenter){
                WidthDimension(label: label, arrow: arrow)
            }
        }
        .overlay(alignment: .leading) {
            if positions.contains(.leading) {
                // 👔 HeightDimension
                HeightDimension(label: label, arrow: arrow).offset(x: -25)
            }
        }
        .overlay(alignment: .trailing) {
            if positions.contains(.trailing) {
                HeightDimension(label: label, arrow: arrow).offset(x: 25)
            }
        }
        .overlay {
            if positions.contains(.hcenter) {
                HeightDimension(label: label, arrow: arrow)
            }
        }
    }
}

⬆️ 需要

• DimensionPositions (enum)

• WidthDimension (View)

• HeightDimension (View)

📗 參考

• Thinking in SwiftUI ⟩ Ch.4 Layout ⟩ Grid Views ⭐️ (💈範例)

👥 相關

• uses DimensionPositions to put width/height dimensions in position.

• uses WidthDimension to draw a width dimension.

• uses HeightDimension to draw a height dimension.

• used by grid layout algorithm to show width dimension.

• can be used to show a View's Frame.

⬇️ 應用

• grid layout algorithm

• TestFrameView - show view's frame behaviors.