4つのトピックに取り組む必要があります。レイアウト、配置、カスタムガイドなどのルールについて学習します。

レイアウトとジオメトリ：はじめに
Layout and geometry: Introduction

SwiftUIでのレイアウトの仕組み
How layout works in SwiftUI

親ビューは子のサイズを提案します。
その情報に基づいて、子供は自分のサイズを選択し、親はその選択を尊重する必要があります。
次に、親が子をその座標空間に配置します。
SwiftUIは背後で4番目のステップを実行します。位置とサイズを浮動小数点数として保存しますが、レンダリングに関しては、SwiftUIはピクセルを最も近い値に丸めるため、グラフィックスは鮮明なままです。

leading
trailing
top異なるビュー間で分割されているビューで作業している場合、これらはまったく機能しません。ユーザーインターフェイスのまったく異なる部分にある2つのビューを同じように配置する必要がある場合。

SwiftUIはalignmentGuide()、まさにこの目的のための修飾子を提供します。これは2つのパラメーターを取ります。変更するガイドと、新しい配置を返すクロージャーです。クロージャーにはViewDimensions、ビューの幅と高さを含むオブジェクトと、さまざまなエッジを読み取る機能が与えられます。

var body: some View {
    VStack(alignment: .leading) {
        ForEach(0..<10) { position in
            Text("Number \(position)")
                .alignmentGuide(.leading) { _ in CGFloat(position) * -10 }
        }
    }
    .background(Color.red)
    .frame(width: 400, height: 400)
    .background(Color.blue)
}

カスタム配置ガイドを作成する方法
How to create a custom alignment guide

カスタムレイアウトガイド

custom layout guide.
VerticalAlignment
HorizontalAlignment

//
//  ContentView.swift
//  LayoutAndGeometry
//
//  Created by Naoki Abe on 2020/09/13.
//  Copyright © 2020 Naoki Abe. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
        HStack {
            VStack {
                Text("@twostraws")
                Image("picture")
                    .resizable()
                    .frame(width: 64, height: 64)
            }

            VStack {
                Text("Full name:")
                Text("PAUL HUDSON")
                    .font(.largeTitle)
            }
        }
        
        HStack(alignment: .midAccountAndName) {
            VStack {
                Text("@twostraws")
                    .alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }
                Image("picture")
                    .resizable()
                    .frame(width: 64, height: 64)
            }

            VStack {
                Text("Full name:")
                Text("PAUL HUDSON")
                    .alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }
                    .font(.largeTitle)
            }
        }
        }
    }
}
extension VerticalAlignment {
    struct MidAccountAndName: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[.top]
        }
    }

    static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}

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