Question

我有一个视图，该视图显示在其他视图的顶部，例如弹出窗口视图，在该视图的内部，我有几个按钮。当我在过度显示的视图中添加单个按钮并点击该按钮时，它将起作用。但是，如果我添加了多个按钮并尝试点击这些按钮，则它们将不起作用。而是单击视图下方的组件。

我想添加多个按钮并在覆盖视图上单击它们，但不确定此代码的错误之处：

这是我的代码：

struct MenuContent: View {

    var body: some View {
        List() {
            ForEach(0..<2) { _ in
                HStack {
                    ForEach(0..<4) { _ in
                        Button(action: {
                            print("tapped button")
                        }) {

                            VStack {
                                Text("Rev")

                                Image("trash.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 60, height: 60)
                            }

                        }.background(Color.blue)
                    }
                }
            }
        }

    }
}

OverlayView

struct OverlayMenu: View {

    let width: CGFloat

    @Binding var show: Bool

    var body: some View {

        return ZStack {
                HStack {
                    MenuContent()
                        .frame(width: self.width, height: 160)
                        .cornerRadius(10, antialiased: false)
                        .offset(x: self.show ? 0 : -self.width, y: 285)
                        .animation(.spring())

                    Spacer()
                }
            .shadow(radius: 20)
        }
    }
}

ContentView

struct ContentView: View {

    @State var show = true

    var body: some View {

        OverlayMenu(width: 350,
                      show: $show)
    }
}

Answer 1

我认为List行并在它们上轻按手势有些麻烦。您可以根据需要对其进行处理，也可以尝试使用VStack而不是List并使用Divider来划分“行”，并且可以按期望的方式处理按钮的点击。我稍微修改了您的示例以展示其工作原理，然后您可以自己处理设计：

struct MenuContent: View {

    @State var hits = 0

    var body: some View {

        VStack {

            Text("\(hits)")

            Divider().frame(width: 250)

            ForEach(0..<2) { _ in
                ButtonsLine(hits: self.$hits)
                Divider().frame(width: 250)
            }
        }
    }

}

struct ButtonsLine: View {

    @Binding var hits: Int

    var body: some View {
        HStack {
            ForEach(0..<4) { value in
                Button(action: {
                    print("tapped button")
                    self.hits += value + 1
                }) {
                    ButtonDesign()
                }
            }
        }
    }
}

struct ButtonDesign: View {

    var body: some View {
        VStack {
            Text("Rev")
                .foregroundColor(.black)

            Image(systemName: "trash")
                .resizable()
                .scaledToFit()
                .foregroundColor(.red)
                .frame(width: 60, height: 60)

        }
        .shadow(radius: 20)
    }

}

结果是：

SwiftUI无法单击覆盖/弹出屏幕中的按钮

1 个答案: