[解決済み] SwiftUIでVStackを画面の幅いっぱいに表示させる

質問

このコードが与えられた。

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Title")
        .font(.title)

      Text("Content")
        .lineLimit(nil)
        .font(.body)

      Spacer()
    }
    .background(Color.red)
  }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}
#endif

その結果、このようなインターフェイスになります。

どうすれば VStack ラベルやテキスト部品が幅を必要としない場合でも、画面の幅いっぱいに表示させることができますか？

私が見つけたトリックとしては 空 HStack のような構造になっています。

VStack(alignment: .leading) {
  HStack {
    Spacer()
  }
  Text("Title")
    .font(.title)

  Text("Content")
    .lineLimit(nil)
    .font(.body)

  Spacer()
}

その結果、目的のデザインが得られます。

もっといい方法はないのでしょうか？

どのように解決するのですか？

を使ってみてください。 .frame モディファイアを以下のオプションで指定してください。

.frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Hello World")
        .font(.title)
      Text("Another")
        .font(.body)
      Spacer()
    }
    .frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )
    .background(Color.red)
  }
}

フレキシブルフレームであることが記載されています( ドキュメントを見る 画面いっぱいに伸縮し、余分なスペースがあればその中にコンテンツを配置します。