Question

我正在尽力重新创建类似电子钱包视图的内容，但无法真正解决。我已经将偏移量硬编码到我的ZStack中，但是我当然也想避免这种情况。偏移似乎使丝锥根本无法对准。到目前为止，这是我的代码，点击卡片应将其标题的颜色更改为白色和黄色。

最终，当然，我希望将动画添加到卡堆中，并能够从其中“拉出”其中的一个以使其成为主要视图。但是我必须弄清楚如何首先抓住水龙头...

我以这部影片为基础，但并没有达到我想要的程度：

https://nsscreencast.com/episodes/399-swiftui-transforms-and-animations

import SwiftUI

struct BetterCards: View {
    var body: some View {

        ScrollView (.vertical) {
                ZStack {
                    CardView(title: "adidas", color: .blue, offset: 0.0)
                    CardView(title: "Le Crueset", color: .pink, offset: 90.0)
                    CardView(title: " Card", color: .black, offset: 180.0)
                    CardView(title: "Sandusk", color: .orange, offset: 270.0)
            }
        }
    }
}


struct CardView: View {

    @State var isYellow: Bool = false

    let title: String
    let color: Color
    let offset: CGFloat

    var body: some View {


        Button(action: {
            self.isYellow.toggle()
        }) {
            ZStack {
                 Rectangle()
                    .fill(color)
                    .cornerRadius(10)
                    .frame(width: 320, height: 210)
                VStack {
                    Text(title)
                        .font(.largeTitle)
                        .bold()
                        .foregroundColor(isYellow ? .yellow : .white)
                        .padding()
                    Spacer()
                }

            }.shadow(radius: 2.0)
            .offset(x: 0, y: offset)

            }.onTapGesture {
            print("Tapped: \(self.title)")
        }
    }
}

struct BetterCards_Previews: PreviewProvider {
    static var previews: some View {
        BetterCards()
    }
}

Answer 1


struct ContentView: View {
    var body: some View {

        ScrollView (.vertical) {
            ZStack(alignment: .top) {
                CardView(title: "adidas", color: .blue, paddingOffset: 0)
                CardView(title: "Le Crueset", color: .pink, paddingOffset: 90)
                CardView(title: " Card", color: .black, paddingOffset: 180)
                CardView(title: "Sandusk", color: .orange, paddingOffset: 270)
            }
        }
    }
}


struct CardView: View {

    @State var isYellow: Bool = false

    let title: String
    let color: Color
    var paddingOffset: CGFloat

    var body: some View {
        ZStack {
            Rectangle()
                .fill(color)
            VStack {
                Text(title)
                    .font(.largeTitle)
                    .bold()
                    .foregroundColor(isYellow ? .yellow : .white)
                    .padding()
                Spacer()
            }

        }.shadow(radius: 2.0)
            .cornerRadius(10)
            .frame(width: 320, height: 210)
            .padding(.top, paddingOffset)
            .onTapGesture {
                self.isYellow.toggle()
                print("Tapped: \(self.title)")
        }
    }
}

Answer 2

我认为您不需要在同一视图上同时使用Button和onTapGesture。您的CardView已经是一个按钮，因此它将注册轻击手势。为了使其正常工作，建议您在按钮本身上移动偏移量。看起来也只有在高度足够高的情况下，它才会在所有视图上注册水龙头，因此我在设置偏移量后在按钮上设置了边框。总体而言，代码看起来像这样：

import SwiftUI

struct BetterCards: View {
    var body: some View {

        ScrollView (.vertical) {
            ZStack(alignment: .top) {
                CardView(title: "adidas", color: .blue, offset: 0.0)
                CardView(title: "Le Crueset", color: .pink, offset: 90.0)
                CardView(title: " Card", color: .black, offset: 180.0)
                CardView(title: "Sandusk", color: .orange, offset: 270.0)
            }
        .padding()
        }
    }
}


struct CardView: View {

    @State var isYellow: Bool = false

    let title: String
    let color: Color
    let offset: CGFloat

    var body: some View {


        Button(action: {
            self.isYellow.toggle()
            print("Tapped: \(self.title)")
        }) {
            ZStack {
                Rectangle()
                    .fill(color)
                    .cornerRadius(10)
                    .frame(width: 320, height: 210)
                VStack {
                    Text(title)
                        .font(.largeTitle)
                        .bold()
                        .foregroundColor(isYellow ? .yellow : .white)
                        .padding()
                    Spacer()
                }
                .frame(width: 320, height: 210)

            }
            .shadow(radius: 2.0)

        }
        .offset(x: 0, y: offset)
        .frame(width: 320, height: 210 + offset, alignment: .top)
    }

}

您可以在不同的视图上对齐和填充以获取所需的内容。

Answer 3

同时感谢Natalia和Mac3n

这让我开始思考，最终我使用了VStack

很高兴听到任何评论。我不确定这是最好的方法。

我已经消除了偏移量，并在卡视图中使用了两个框架-一个用于矩形，一个用于ZStack。不过，我仍在尝试找出VStack上.frame的数学公式。这似乎是纸牌数量+纸牌实际高度的倍数，再加上一些我无法固定的变量。

import SwiftUI

struct BetterCards: View {

    let multiplier:CGFloat = 6

    var body: some View {

        ScrollView {
            Text("HEADER").background(Color(.blue))
            VStack {
                CardView(title: " Card", color: .black)
                CardView(title: "adidas", color: .blue)
                CardView(title: "Puma", color: .green)
                CardView(title: "Le Crueset", color: .yellow)
//                CardView(title: "adidas", color: .blue)
//                CardView(title: "OnlyLyon", color: .green)
//                CardView(title: "Le Crueset", color: .yellow)
                CardView(title: "adidas", color: .blue)
                CardView(title: "Sandusk", color: .orange)
//                CardView(title: "Le Crueset", color: .pink)
                }
            .frame(width: 400, height: multiplier * 60 + (430 - ( 52 )))
            .padding()
            .background(Color.gray)
            Text("FOOTER").background(Color(.blue))
        }
        .background(Color.yellow)
    }
}

struct CardView: View {

    @State var isYellow: Bool = false

    let title: String
    let color: Color

    var body: some View {
        ZStack {
             Rectangle()
                .fill(color)
                .cornerRadius(10)
                .frame(width: 370, height: 430)
            VStack {
                Text(title)
                    .font(.largeTitle)
                    .bold()
                    .foregroundColor(isYellow ? .yellow : .white)
                    .padding()
                Spacer()
                }
        }
        .frame(width: 370, height: 60)
        .onTapGesture {
                self.isYellow.toggle()
                print("Tapped: \(self.title)")
        }
        .shadow(radius: 2.0)
    }
}

struct BetterCards_Previews: PreviewProvider {
    static var previews: some View {
        BetterCards()
    }
}

如何在ZStack中的自定义卡片视图上捕获点击？

3 个答案: