ScrollView 导致 SwiftUI 中的按钮出现错误答案

【问题标题】：ScrollView causes buggy buttons in SwiftUIScrollView 导致 SwiftUI 中的按钮出现错误
【发布时间】：2020-03-03 11:20:04
【问题描述】：

我一直在尝试在 SwiftUI 中创建一个表单，但由于使用“Form()”的限制，我选择创建一个包含一个按钮的 ForEach 循环的 ScrollView。当我运行项目并尝试单击按钮时，它会单击不正确的按钮，除非我滚动视图。我是 SwiftUI 的新手，我一直无法弄清楚。

我尝试制作不同大小的 ScrollView，但似乎没有相关性

struct DropDown: View {

var datos: [String]
var categoria: String

@State var titulo: String = "Seleccione"
@State var expand = false

var body: some View {

    VStack {
        Text(categoria).fontWeight(.heavy).foregroundColor(.white)
        HStack {
            Text(titulo).fontWeight(.light).foregroundColor(.white)
            Image(systemName: expand ? "chevron.up" : "chevron.down").resizable().frame(width: 10, height: 6).foregroundColor(.white)

        }.onTapGesture {
            self.expand.toggle()
        }

        if expand {
            ScrollView(showsIndicators: true) {
                ForEach(0..<self.datos.count){ nombre in
                    Button(action: {
                        print(self.datos[nombre])
                        self.titulo = self.datos[nombre]
                        self.expand.toggle()
                        diccionarioDatos[self.categoria] = self.titulo
                        print(diccionarioDatos)
                    }) {
                        Text(self.datos[nombre]).foregroundColor(.white)
                    }
                }
            }
            .frame(maxHeight: 150)
            .fixedSize()
        }
    }
    .padding()
    .background(LinearGradient(gradient: .init(colors: [.blue, .green]), startPoint: .top, endPoint: .bottom))
    .cornerRadius(20)
    .animation(.spring())
}

}

I clicked on "2018" under "Modelo" and "2015" got selected for some reason

This is how the dropdown menu looks like

【问题讨论】：

点击错误按钮是什么意思？错误的按钮是否突出显示？错误的日期打印到控制台？更多上下文可能有助于找到解决方案。
当我尝试从下拉列表中选择一个按钮时，它会按下不同的按钮，通常是列表中的第一个。
添加父视图的代码可能有用吗？我唯一能建议的是仔细检查按钮文本的框架，看看它是否符合您的预期。
完成了，你能再试试看吗...非常感谢！！

标签： swift scrollview swiftui

【解决方案1】：

考虑使用.onTapGesture 而不是action 作为按钮。

Button(action: {}, label: {
    Text(self.datos[nombre]).foregroundColor(.white)
}).onTapGesture{
    print(self.datos[nombre])
    self.titulo = self.datos[nombre]
    self.expand.toggle()
    diccionarioDatos[self.categoria] = self.titulo
    print(diccionarioDatos)
}

【讨论】：

onTapGesture 不再被空按钮操作调用 (Xcode 11.3.1)

【解决方案2】：

在我测试时，观察到的行为是由于动画属性的顺序造成的。在您的情况下，将圆角移动到背景本身可以解决问题。

所以不是

.background(
    LinearGradient(gradient: .init(colors: [.blue, .green]), startPoint: .top, endPoint: .bottom)
)
.cornerRadius(20)

使用

.background(
    LinearGradient(gradient: .init(colors: [.blue, .green]), startPoint: .top, endPoint: .bottom)
        .cornerRadius(20)
)

【讨论】：

为什么VStack上的修饰符会出问题？按钮的布局是否奇怪？
这实际上是正确的，添加 .animation(nil) 解决了我的问题
优秀的答案。对于所有带有由 ForEach 加载的按钮的 Scrollview 来说，这也是我的问题。在我的例子中，Parent 有 CornerRadius，每个按钮都有 CornerRadius，将 CornerRadius 移动到 .background 属性中起作用。