VStack中不同的垂直对齐方式

Posted 2023-02-24

【中文标题】VStack中不同的垂直对齐方式

【英文标题】：Different vertical alignment in VStack

【发布时间】：2021-05-28 07:30:52

【问题描述】：

我的目标是使Text("Headline") 位于图像顶部的同一级别，Divider() 位于图像底部的同一级别，而不会丢失它们之间的内容空间。我尝试了 VStack 和 HStack、.frame 和 .alignmentGuide 的默认对齐方式，但没有什么对我没有帮助。我避免在 VStack 中使用 Spacer()，因为它会占用空间并且 Text("Add info") 中的内容丢失。

    HStack 
        Image("temp 1")
            .resizable()
            .frame(width: 120, height: 120)

            
        VStack(alignment: .leading, spacing: 4) 
            Text("Headline")
                .font(.title2)
                .fontWeight(.semibold)

            Text("Subheadline")
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text("Add info: This Divider should be on bottom of Vstack")
                .font(.subheadline)
                .fontWeight(.regular)

            Divider()
        
    
    .padding(16)

How it should be

图片上的第1行是Text("Headline")应该在的位置，第2行是Divider()的位置

【问题讨论】：

你能分享你想要的输出截图吗？不清楚你到底想要什么。

能否分享所需输出的附件？

添加了一张图片，希望看起来更清晰

【参考方案1】：

经过测试。完美运行：

        HStack(spacing: 0) 
            Image("fox")
                .resizable()
                .frame(width: 120, height: 120) // here
                .padding(.trailing, 4)

            VStack(alignment: .leading, spacing: 0) 
                Text("Headline")
                    .font(.title2)
                    .fontWeight(.semibold)
                
                Spacer(minLength: 4)

                Text("Subheadline")
                   .font(.subheadline)
                   .foregroundColor(.secondary)

                Spacer(minLength: 4)

                Text("Add info: This Divider should be on bottom of Vstack")
                   .font(.subheadline)
                   .fontWeight(.regular)

                Spacer().frame(height: 4)
                
                Divider()
           
           .frame(height: 120)
        

【讨论】：

哦，我觉得我的图片有点不理解，我不想在顶部和底部添加矩形，我想在这些地方精确定位视图

@Nizami 立即尝试

不是解决方案： 1. 添加 .frame (width: metrics.size.width * 0.33) 会破坏所需的图像尺寸并将其拉伸到全屏 2. 分隔线不在图像底部的同一级别（走出屏幕）

已修复。做了你想做的一切。一切正常，附上截图。

我刚刚删除了 Text Views 之间的 Spacer，并在 Divider() 之前留下了 Spacer(minLength: 4)。完美，谢谢！