[SwfitUI] Layout を理解する

func sizeThatFits(
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
) -> CGSize

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
)

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        guard !subviews.isEmpty else { return .zero }
		// 1)
        let subviewSizes = subviews.map({$0.sizeThatFits(.unspecified)})
		// 2)
        let maxWidth: CGFloat = subviewSizes.reduce(0.0, {partialResult, subviewSize in
            max(partialResult, subviewSize.width)
        })
		// 3)
        var totalHeight = subviewSizes.reduce(0.0, { partialResult, subviewSize in
            partialResult + subviewSize.height
        })
		// 4)
        _ = subviews.indices.dropLast().map({
            totalHeight += subviews[$0].spacing.distance(to: subviews[$0 + 1].spacing, along: .vertical)
        })
		// 5)
        return CGSize(width: maxWidth, height: totalHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard !subviews.isEmpty else { return }
        // 1)
        var y = bounds.minY
        for index in subviews.indices {
            // 2)
            subviews[index].place(at: CGPoint(x: bounds.midX, y: y),
                                  anchor: .top,
                                  proposal: .unspecified)
            // 3)
            y += subviews[index].sizeThatFits(.unspecified).height

            // 4)
            let nextIndex = subviews.index(after: index)
            if nextIndex < subviews.endIndex {
                y += subviews[index].spacing.distance(to: subviews[nextIndex].spacing, along: .vertical)
            }
        }
    }

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/07/13
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            RoundedRectangle(cornerRadius: 2)
                .fill(.gray).frame(width: 30, height: 300)
            GuideBoardStack()
                .callAsFunction({
                GuideArrow(text: "London", direction: .up)
                GuideArrow(text: "Tokyo", direction: .upright).font(.title)
                GuideArrow(text: "Nagoya", direction: .left)
                GuideArrow(text: "Okinawa", direction: .downleft)
                GuideArrow(text: "Australia", direction: .down)
                GuideArrow(text: "Yokohama Station", direction: .right)
            })
            //.border(.green)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct GuideBoardStack: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        guard !subviews.isEmpty else { return .zero }
        let subviewSizes = subviews.map({$0.sizeThatFits(.unspecified)})
        let maxWidth: CGFloat = subviewSizes.reduce(0.0, {partialResult, subviewSize in
            max(partialResult, subviewSize.width)
        })
        var totalHeight = subviewSizes.reduce(0.0, { partialResult, subviewSize in
            partialResult + subviewSize.height
        })
        _ = subviews.indices.dropLast().map({
            totalHeight += subviews[$0].spacing.distance(to: subviews[$0 + 1].spacing, along: .vertical)
        })
        return CGSize(width: maxWidth, height: totalHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard !subviews.isEmpty else { return }

        var y = bounds.minY
        for index in subviews.indices {
            subviews[index].place(at: CGPoint(x: bounds.midX, y: y),
                                  anchor: .top,
                                  proposal: .unspecified)
            y += subviews[index].sizeThatFits(.unspecified).height
            let nextIndex = subviews.index(after: index)
            if nextIndex  subviews.endIndex {
                y += subviews[index].spacing.distance(to: subviews[nextIndex].spacing, along: .vertical)
            }
        }
    }
}

struct GuideArrow: View {
    let text: String
    let direction: GuideDirection
    var body: some View {
        HStack(spacing: 0) {
            switch direction {
            case .left, .up, .upleft, .downleft:
                Image(systemName: direction.symbolName)
                Text(text)
            case .right, .down, .downright, .upright:
                Text(text)
                Image(systemName: direction.symbolName)
            }
        }
        .foregroundColor(.white)
        .padding(2)
        .background{
            RoundedRectangle(cornerRadius: 5).fill(Color.blue)
        }
        .padding(1)
        .background{
            RoundedRectangle(cornerRadius: 6).fill(Color.white)
        }
        .padding(1)
        .background{
            RoundedRectangle(cornerRadius: 7).fill(Color.blue)
        }
    }
}

enum GuideDirection: String, RawRepresentable {
    case up, down, left, right, upleft, upright, downleft, downright
    var symbolName:String {
        switch self {
        case .up:
            return "arrow.up"
        case .down:
            return "arrow.down"
        case .left:
            return "arrow.left"
        case .right:
            return "arrow.right"
        case .upleft:
            return "arrow.up.left"
        case .upright:
            return "arrow.up.right"
        case .downleft:
            return "arrow.down.left"
        case .downright:
            return "arrow.down.right"
        }
    }
}