.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)
    }
}

⬆️ 需要： 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)
            }
        }
    }
}

PreviousView NextPath+

Last updated 2 years ago

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

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