SwiftUIでテキストの位置を揃えたいとき…🤔

SwiftUIで横並びのテキストのAlignmentを下揃えにするのはどうするんだろ？と思い調べた。 .lastTextBaselineを指定すると良いみたい。

A guide that marks the bottom-most text baseline in a view. Use this guide to align with the baseline of the bottom-most text in a view. The guide aligns with the bottom of a view that contains no text."

https://developer.apple.com/documentation/swiftui/verticalalignment/firsttextbaseline

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8.0) {
            Group {
                HStack(alignment: .top) {
                    Text("山田 太郎").font(.title)
                    Text("25歳").font(.callout)
                }
                Text(".top")
                            
                HStack(alignment: .center) {
                    Text("山田 太郎").font(.title)
                    Text("25歳").font(.callout)
                }
                Text(".center")

                HStack(alignment: .bottom) {
                    Text("山田 太郎").font(.title)
                    Text("25歳").font(.callout)
                }
                Text(".bottom")

                HStack(alignment: .firstTextBaseline) {
                    Text("山田 太郎").font(.title)
                    Text("25歳").font(.callout)
                }
                Text(".firstTextBaseline")
            }

            HStack(alignment: .lastTextBaseline) {
                Text("山田 太郎\n（開発チーム所属）")
                    .font(.title)
                Text("25歳")
                    .font(.callout)
            }
            Text(".lastTextBaseline（2行テキストの場合）")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}