[英]Problem with Clipshape and RoundedRectangle
我遇到了一個問題,當子視圖大於總屏幕寬度時,我的 ClipShape 被禁用。 我試圖修補它,但我不明白這里有什么問題。
這是兩張圖片,您將在下面找到代碼:
這是我的完整代碼:
import SwiftUI
struct OnboardingView: View {
@State var x: CGFloat = 0
@State var count : CGFloat = 0
@State var screen = UIScreen.main.bounds.width - 30
@State var op : CGFloat = 0
@State var data = [
Card(id: 0, title: "Carte 1", image: "onboarding"),
Card(id: 1, title: "Carte 2", image: "onboarding"),
Card(id: 2, title: "Carte 3", image: "onboarding")
]
var body: some View {
ZStack(alignment: .top) {
Color.black
.edgesIgnoringSafeArea(.all)
Color("background2")
.edgesIgnoringSafeArea(.bottom)
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
HStack(spacing: 15) {
ForEach(data) { i in
CardView(data: i)
.offset(x: self.x)
.highPriorityGesture(
DragGesture()
.onChanged { value in
if value.translation.width > 0 {
self.x = value.location.x
} else {
self.x = value.location.x - self.screen
}
}
)
}
}
// CardView(data: data[0])
}
}
}
struct OnboardingView_Previews: PreviewProvider {
static var previews: some View {
OnboardingView()
}
}
struct CardView: View {
@State var show = false
var data: Card
var body: some View {
VStack {
// Title - use the geometry reader to adapt font size.
GeometryReader { geometry in
Text(self.data.title)
.font(.system(size: geometry.size.width / 9, weight: .bold))
.foregroundColor(.white)
}
.frame(maxWidth: 375, maxHeight: 220)
.padding(.horizontal, 16)
Spacer()
}
.frame(width: UIScreen.main.bounds.width)
.offset(x: show ? 0 : -500)
.multilineTextAlignment(.center)
.padding(.top, 25)
.frame(height: 477)
.background(
ZStack {
Image(uiImage: #imageLiteral(resourceName: "Blob"))
.offset(x: -150, y: -200)
.rotationEffect(Angle(degrees: show ? 360 + 90 : 90))
.blendMode(.plusDarker)
.animation(Animation.linear(duration: 120).repeatForever(autoreverses: false))
.onAppear {
self.show = true
}
.background(
Image(uiImage: #imageLiteral(resourceName: "Blob"))
.offset(x: -200, y: -250)
.rotationEffect(Angle(degrees: show ? 360 : 0), anchor: .leading)
.blendMode(.overlay)
.animation(Animation.linear(duration: 100).repeatForever(autoreverses: false))
)
}
)
.background(
Image(self.data.image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.opacity(0.8),
alignment: .bottom
)
.background(Color("card1"))
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
}
}
struct Card: Identifiable {
var id: Int
var title: String
var image: String
}
有人可以幫忙嗎? RoundedRectangle Clipshape 僅在我顯示所有卡片時才會消失。 我認為這是一個問題,因為 HStack 的總寬度大於我應用 clipshape 的背景。
我怎樣才能解決這個問題? 非常感謝 !
這是一個提供所需剪輯的解決方案
var body: some View {
ZStack(alignment: .top) {
Color.black
.edgesIgnoringSafeArea(.all)
Rectangle().fill(Color.gray)
.edgesIgnoringSafeArea(.bottom)
.clipShape(RoundedRectangle(cornerRadius: 30))
Color.clear // transparent clipped foreground window
.background(
VStack { // clipped background content
HStack(spacing: 15) {
ForEach(data) { i in
CardView(data: i)
.offset(x: self.x)
.highPriorityGesture(
DragGesture()
.onChanged { value in
if value.translation.width > 0 {
self.x = value.location.x
} else {
self.x = value.location.x - self.screen
}
}
)
}
}
Spacer()
}
)
.edgesIgnoringSafeArea(.bottom)
.clipShape(RoundedRectangle(cornerRadius: 30))
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.