[SwiftUI] レイアウトの調整

元のテキスト

        VStack {
            Text("春はあけぼの")
            Text("夏は夜")
            Text("秋は夕暮")
            Text("冬はつとめて")
        }
        .font(.largeTitle)

行間と文字揃え

        VStack(alignment: .leading, spacing: 15.0) {
            Text("春はあけぼの")
            Text("夏は夜")
            Text("秋は夕暮")
            Text("冬はつとめて")
        }

スペーサーを使って位置調整

        VStack {
            Spacer()
            VStack(alignment: .trailing) {
                Text("知性の自転車")
                    .font(.largeTitle)
                    .fontWeight(.black)
                Text("Bicycle for the Mind.")
                    .italic()
            }
            Spacer()
            VStack(alignment: .trailing) {
                Text("憐れみは恋の始まり")
                    .font(.largeTitle)
                    .fontWeight(.black)
                Text("Pity is akin to love.")
                    .italic()
            }
            Spacer()
        }

パディングを使った余白調整
.offsetで位置をずらせる

        VStack {
            VStack(alignment: .trailing) {
                Text("知性の自転車")
                    .font(.largeTitle)
                    .fontWeight(.black)
                Text("Bicycle for the Mind.")
                    .italic()
                    .offset(x: -10, y: 0)
            }
            .padding(.top, 80)
            VStack(alignment: .trailing) {
                Text("憐れみは恋の始まり")
                    .font(.largeTitle)
                    .fontWeight(.black)
                Text("Pity is akin to love.")
                    .italic()
                    .offset(x: -10, y: 0)
            }
            .padding(.top, 20)
            Spacer()
        }

パディングを使いこなす

    var body: some View {
        VStack(alignment: .leading) {
            Text("1. 枕草子/清少納言")
                .padding([.leading, .bottom], 20.0)
            Text("2. 春はあけぼの")
            Text("3. やうやう白くなり行く")
            Text("4. 山ぎは少し灯て")
                .padding()
            Text("5. 紫立ちたる雲の細くたなびきたる")
        }
        .padding(.vertical, 50.0)
        .padding(.horizontal, 30.0)
        .font(.callout)
        .border(Color.pink, width: 2)
    }

殆どCSSと遜色ないな