[英]Text spills outside of boundary of Rectangle in SwiftUI with overlay
I want Text 1 and Text 2 in the blue rectangle to be within the boundaries of the Rectangle
but when using overlay it seems to spill outside of the given boundary.我希望蓝色矩形中的文本 1 和文本 2 在Rectangle
的边界内,但是当使用覆盖时,它似乎溢出给定边界之外。 How can one fix this?如何解决这个问题?
I tried ZStack
as well but had the same result.我也尝试了ZStack
,但结果相同。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
ZStack {
Rectangle()
.stroke(lineWidth: 1)
.frame(width: 1, height: 55)
Rectangle()
.stroke(lineWidth: 10)
.cornerRadius(15)
.foregroundColor(Color.blue)
.frame(width: .infinity, height: 60)
.padding()
}
.overlay(
HStack {
Text("Text 1")
Spacer()
Text("Text 2")
}
)
}
}
}
You need to place overlay in different place (order of modifiers is important,), like您需要将叠加层放置在不同的位置(修饰符的顺序很重要),例如
var body: some View {
VStack {
ZStack {
Rectangle()
.stroke(lineWidth: 1)
.frame(width: 1, height: 55)
Rectangle()
.stroke(lineWidth: 10)
.cornerRadius(15)
.foregroundColor(Color.blue)
.overlay(
HStack { // << here !!
Text("Text 1")
Spacer()
Text("Text 2")
}
.padding(.horizontal)
)
.frame(width: .infinity, height: 60)
.padding()
}
}
}
Tested with Xcode 13 / iOS 15用 Xcode 13 / iOS 15 测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.