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

Posted 2023-02-24

【中文标题】如何在 VStack 中为子视图排列底部文本

【英文标题】：How to line up bottom text for child view in VStack

【发布时间】：2021-07-19 21:41:06

【问题描述】：

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

    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，底部文本视图仍然相对于带有长文本的顶部视图被推送。

这是我想要完成的。

【问题讨论】：

两列之间的行数是可变的，还是固定的？

@Yrb 这是可变数量的文本而不是行

你能上传一张你想要完成的图片吗？或者，只要底部 2 行是偶数，您就不在乎？它必须是矩形上的叠加层，还是应该看起来像那样？

@Yrb 我用我想要完成的内容更新了帖子

我不想开始回答，必须不断改变它。 Stack()s 中 Text() 视图之间的明显 Spacer() 怎么样。您可以填充底部的，以便将它们钉在视图的底部。

【参考方案1】：

我会简单地将Spacer()s 放在Text()s 和VStack()s 之间。

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.
                        
                    )
            
        
    

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