ios 为什么在 VStack 中添加 HStack 会破坏文本元素周围 ZStack 气泡的大小计算？

rsaldnfx 于 2022-11-19 发布在 iOS

关注(0)|答案(1)|浏览(130)

我想生成一个气泡状的视图，在圆角矩形背景上有多段文本，大小适合文本。我得到了这样的结果：

var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .trailing) {
                Color.blue
                VStack{
                    Text(message.content)
                        .padding(.all, .oneUnit)
                        .multilineTextAlignment(.trailing)
                }
            }
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
    }

当用ForEach和作为消息传入的一些文本重复该操作时，内容几乎是正确的，但ZStack背景应该只够大，以覆盖文本，从而形成一个气泡：

使用.layoutPriority修复此问题，代码变为：

var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .trailing) {
                Color.blue
                VStack{
                    Text(message.content)
                        .padding(.all, .oneUnit)
                        .multilineTextAlignment(.trailing)
                }
                .layoutPriority(1)
            }
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
    }

所以ZStack的大小就是容纳文本所需的大小。太好了！现在把所有需要的文本片段放到VStack中。让我们再添加一个Text：

var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .trailing) {
                Color.blue
                VStack{
                    Text(message.content)
                        .padding(.all, .oneUnit)
                        .multilineTextAlignment(.trailing)
                    Text("Out damned spot!")
                }
                .layoutPriority(1)
            }
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
    }

文字显示在下方，大小仍然正确。

但是最后一段文本必须右对齐，所以代码是：

var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .trailing) {
                Color.blue
                VStack{
                    Text(message.content)
                        .padding(.all, .oneUnit)
                        .multilineTextAlignment(.trailing)
                    HStack {
                        Spacer()
                        Text("Out damned spot!")
                    }
                }
                .layoutPriority(1)
            }
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
    }

然后一切都坏了，有没有人能说为什么X1 M6 N1 X会打破X1 M7 N1 X的尺寸？

ios

来源：https://stackoverflow.com/questions/74385262/why-does-adding-a-hstack-inside-a-vstack-wreck-size-calculations-for-a-zstack-bu

1条答案

按热度按时间

piztneat1#

@SwissMark是对的，你的问题是因为Spacer()太贪婪了，它占据了所有的空间。让你的泡泡尽可能的大。但是仅仅让VStack对齐.trailing并不能达到目的。

问题：
1.您的背景设置在ZStack中

layoutPriority在这里没有任何意义
解决方案如下：

import SwiftUI

struct ContentView: View {
    
    var messages = [
        "I heard the owl scream and the crickets cry.",
        "Out damned spot!",
        "Did not you speak?",
        "Out damned spot!",
        "When?",
        "Out damned spot!",
        "Now.",
        "Out damned spot!"
    ]
    
    var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .trailing) {
                VStack(alignment: .trailing) {
                    VStack(alignment: .trailing) {
                        Text(messages[0])
                            .padding(.all, 4)
                            .multilineTextAlignment(.trailing)
                        Text(messages[1])
                            .padding([.bottom, .trailing], 4)
                    }
                    .padding(4)
                    .background(Color.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                    
                    VStack(alignment: .trailing) {
                        Text(messages[2])
                            .padding(.all, 4)
                            .multilineTextAlignment(.trailing)
                        Text(messages[3])
                            .padding([.bottom, .trailing], 4)
                    }
                    .padding(4)
                    .background(Color.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                    
                    VStack(alignment: .trailing) {
                        Text(messages[4])
                            .padding(.all, 4)
                            .multilineTextAlignment(.trailing)
                        Text(messages[5])
                            .padding([.bottom, .trailing], 4)
                    }
                    .padding(4)
                    .background(Color.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                    
                    VStack(alignment: .trailing) {
                        Text(messages[6])
                            .padding(.all, 4)
                            .multilineTextAlignment(.trailing)
                        Text(messages[7])
                            .padding([.bottom, .trailing], 4)
                    }
                    .padding(4)
                    .background(Color.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                }
            }
        }
    }
}

最终图像：

根据需要修改填充和空格。

赞(0）回复(0）举报 2022-11-19

我来回答

ios 为什么在 VStack 中添加 HStack 会破坏文本元素周围 ZStack 气泡的大小计算？

1条答案

相关问题

热门标签

最新问答

ios 为什么 在 VStack 中 添加 HStack 会 破坏 文本 元素 周围 ZStack 气泡 的 大小 计算 ？

1条答案

相关问题

热门标签

最新问答

ios 为什么在 VStack 中添加 HStack 会破坏文本元素周围 ZStack 气泡的大小计算？