如何在 VStack 中为子视图排列底部文本

问题描述

我有以下代码产生以下输出。

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

我如何让文本 data 与文本 data 2 对齐，即使它上面的视图（文本）要大得多，文本 "11 / 11 /11 /111/1 111"，并导致底部视图将进一步向下推？我将如何阻止这种情况发生？

我还应该提到我不希望 "11 / 11 /11 /111/1 111" 被截断。

编辑：如果该长文本与其下方的文本相比具有较小的字体大小，则没关系。我也尝试过 minimumScaleFactor，但底部文本视图仍然相对于带有长文本的顶部视图进行推送。

这是我想要完成的。

解决方法

我会简单地将 Spacer() 放在 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.
                        }
                    )
            }
        }
    }
}

这段代码让你知道：