swift - VStack の子ビューの下部テキストを揃える方法

Question

次の出力を生成する次のコードがあります。

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Text("data")
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Text("data 2")
                        }
                    )
            }
        }
    }

その上のビュー（テキスト）がはるかに大きく、 textであり、下のビューがさらに下に押し出されている場合でもdata、テキストをテキストと揃えるにはどうすればよいですか? どうすればそれが起こらないようにできますか?data 2"11 / 11 /11 /111/1 111"

"11 / 11 /11 /111/1 111"また、切り捨てられたくないことにも言及する必要があります。

編集: その長いテキストのフォント サイズがその下のテキストに比べて小さくても問題ありません。私も試してみましたがminimumScaleFactor、下部のテキスト ビューは、長いテキストを含む上部のビューに対してまだプッシュされています。

これが私が達成したいことです。

Answer 1

Spacer()s の s の間に s をText()入れるだけVStack()です。

struct ContentView: View {
    var body: some View {
        
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data 2")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
            }
        }
    }
}

このコードは次のようになります。