我想生成一个气泡状的视图,在圆角矩形背景上有多段文本,大小适合文本。我得到了这样的结果:
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的尺寸?
1条答案
按热度按时间piztneat1#
@SwissMark是对的,你的问题是因为
Spacer()
太贪婪了,它占据了所有的空间。让你的泡泡尽可能的大。但是仅仅让VStack
对齐.trailing
并不能达到目的。问题:
1.您的背景设置在
ZStack
中解决方案如下:
最终图像:
根据需要修改填充和空格。