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

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

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

编辑：如果长文本的字体大小比它下面的文本小，那也没关系。我也尝试minimumScaleFactor过，底部文本视图仍然相对于带有长文本的顶部视图被推送。

这就是我想要完成的。

Answer 1

我会简单地将Spacer()s 放在你Text()的 s之间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.
                        }
                    )
            }
        }
    }
}

这段代码给你留下了这个：