SwiftUI Text Alignment

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

October 21, 2025 · 1 min