【发布时间】：2021-01-23 07:45:24
【问题描述】：
我有一个使用 SwiftUI 在 iOS 13 上完美显示的按钮列表，但在 iOS 14 上，它会在屏幕结束的地方切断内容。
关于 HStacks 如何渲染屏幕上没有的内容有什么变化吗？我曾经滚动并能够看到所有按钮。
我会附上一些截图和代码。
var body: some View {
VStack(alignment: .leading, spacing: 0){
Text("Select a venue type")
.font(.custom("MavenProBold", size: 16))
.padding(.leading, 16)
.padding(.top, 18)
.foregroundColor(Color.black)
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .center, spacing: 4, content: {
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
})
.padding(.leading, 8)
.padding(.trailing, 8)
.padding(.bottom, 8)
}
}
}
【问题讨论】：
-
提供的代码快照（带有复制的缺失部分）适用于 Xcode 12.0 / iOS 14。所以问题可能在其他一些代码中。
-
我会在别处再看看，谢谢！我已经将 hstack 和 scrollview 设置为具有不同的背景颜色，并且 hstack 颜色在屏幕结束的地方结束，您可以看到 scrollview 背景颜色。奇怪的是，hstack 中的按钮仍然可以点击并且功能正常，它们只是没有出现，并且 hstack 的可见性，而不是功能性让位于滚动视图。
-
我也刚刚注意到这种行为！我现在正试图弄清楚并在我们的代码中找到共同点。按钮可以工作，但在超出手机宽度时不可见。
-
我发现了问题，我在 ScrollView 上使用了 clipShape。我在 stackoverflow.com/questions/56760335/… 上使用了带有 Mojtaba Hosseini 制作的特定角的扩展的cornerRadius，也许你也在某处剪裁形状。它确实曾经在iOS 13上工作过，但仍然不知道为什么。我已经删除了 clipShape，但不幸的是，现在我的 UI 并没有达到应有的水平。