【SwiftUI】Textにブランクが入ったときに意図せぬ高さに設定されてしまう場合の対応

SwiftUIでTextを使っていて、
ブランクが入った場合に想定していた値と異なる高さが設定されレイアウトが崩れるというケースがありました。
初歩的かもしれませんが、その事象の共有と対応について記載しようと思います。

環境

Xcode：14.1
シミュレーター：iPhone14 Pro（iOS:16.1）

事象

Textを縦方向に並べるケースを考えます

struct SwiftUIView: View {

    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading, spacing: 0) {
                Text("Text")
                    .foregroundColor(Color.white)
                    .background(Color.blue)
                Text("Text")
                    .foregroundColor(Color.white)
                    .background(Color.red)
                Text("Text")
                    .foregroundColor(Color.white)
                    .background(Color.green)
            }
            VStack(alignment: .leading, spacing: 0) {
                Text("Text")
                    .foregroundColor(Color.white)
                    .background(Color.blue)
                Text("")
                    .foregroundColor(Color.white)
                    .background(Color.red)
                Text("Text")
                    .foregroundColor(Color.white)
                    .background(Color.green)
            }
        }
    }
}

右のVStackはそれぞれ任意の文字列が入る想定で、
わかりやすいように背景色を設定しています。
また、左には高さの比較用にVStackを加えています。

想定としては右のVStackは上から二番目の領域にブランクが入っていますが、
レイアウトとしては設定したフォントサイズ分の余白を期待すると思います。
が、表示としてはスクショのようになり、左の基準に対して高さがずれます。

フォントやフォントサイズを変えてViewHierarchyで確認してみたところ、
Textにブランクが入った場合はデフォルトで14pt分の余白が設定されるようでした。

なぜ14pt分空いてしまうのか私が調べた範囲だとわからなかったのですが、
とにかくブランクでも一行分の空白をあけておくために以下の対応を行いました

対応方法

めちゃくちゃ単純ですが、.frame(minHeight:)を設定します

struct SwiftUIView: View {

    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading, spacing: 0) {
                Text("Text")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.blue)
                Text("Text")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.red)
                Text("Text")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.green)
            }
            VStack(alignment: .leading, spacing: 0) {
                Text("Text")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.blue)
                Text("")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.red)
                Text("Text")
                    .frame(minHeight: 20)
                    .foregroundColor(Color.white)
                    .background(Color.green)
            }
        }
    }
}

最小のheightが指定されてるので、ブランクになっても意図したサイズを保ってくれます。

直接heightを指定しない理由

ここまでが本件の解決策ですが、ここでわざわざminHeightを指定して、heightを使わない理由を記載します。

私も最初はheightを直接指定していましたが、複数行のケースも考えるとminHeight指定がベターだなと考えました。

赤の領域に入るテキストが2行を許容する場合を考えます。
背景の幅をそろえるため、テキストのframeの幅も指定しています。
また、ここ以降では左の基準として使っていたVStackは削除しています。

struct SwiftUIView: View {
    
    let width: CGFloat = UIScreen.main.bounds.width
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Title")
                .frame(width: width, height: 20)
                .foregroundColor(Color.white)
                .background(Color.blue)
            Text("長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト")
                .lineLimit(2)
                .frame(width: width, height: 20)
                .foregroundColor(Color.white)
                .background(Color.red)
            Text("Title")
                .frame(width: width, height: 20)
                .foregroundColor(Color.white)
                .background(Color.green)
        }
    }
}

この場合、heightを直接指定していると2行許容が反映されません。

frameを直接指定するのは可変の文字列に対しては難しいため、やはりminHeightで指定するのがよさそうです。

minHeightを使用した場合↓

struct SwiftUIView: View {
    
    let width: CGFloat = UIScreen.main.bounds.width
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Title")
                .frame(minWidth: width, minHeight: 20)
                .foregroundColor(Color.white)
                .background(Color.blue)
            Text("長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト")
                .lineLimit(2)
                .frame(minWidth: width, minHeight: 20)
                .foregroundColor(Color.white)
                .background(Color.red)
            Text("Title")
                .frame(minWidth: width, minHeight: 20)
                .foregroundColor(Color.white)
                .background(Color.green)
        }
    }
}

終わりに

xibやstoryboardでレイアウトを組んでいたときは、制約の付け方が柔軟だったのでよしなにレイアウトを組めたけど、SwiftUIでは厳密に理解して組まないと結構些細なことで崩れてしまうので難しいんですよねぇ。。