在 SwiftUI 中单击表单内的按钮时没有点击动画

Question

我在 SwiftUI 中使用基于 YouTube 教程的 Form，并且在其中放置了一些组件。但是，当我点击按钮时，当我轻轻点击一次时，它不会显示点击动画（例如，当我点击 iOS 设置应用程序中的按钮时，按钮背景会发生变化）。这是我的代码：

var body: some View {
        Form {
            Section(header: Text("Input:")) {
                TextField("Add Some text here", text: $text)
            }
            
            Section(header: Text("Letter: Count")) {
                let charCount = text.filter({ $0 != " " }).count
                
                if (charCount > 30) {
                    Text(String(charCount)).foregroundColor(.red)
                } else {
                    text == "" ? Text("Empty") : Text(String(charCount))
                }
            }
            
            Section(header: Text("actions")) {
                Button("Save Data") {
                    UserDefaults.standard.set(text, forKey: "TEXT_Key")
                } 
                // When I lightly clicked it, the inner code will be executed, but no visual  effect will be shown.
            }
        }
    }

如果这个问题看起来很愚蠢，请原谅我

我的 Xcode 版本：14.3 (14E222b)。 目标设备：iPhone 14 Pro 模拟器和适用于 True Device 的 iOS 16.5

我搜索了谷歌，没有找到关于这个具体问题的解释或解决方案。我尝试使用Release配置编译代码，但问题仍然存在。

预期的结果是我的按钮应该像 iOS 设置应用程序中的按钮一样，即使轻轻点击也会触发背景颜色变化。

Answer 1

这是表单的一个已知问题，按钮无法正常工作，并且没有真正的修复（据我所知），部分单元格将用您观察到的奇怪行为覆盖按钮单击。 您可以尝试一种“干净”的解决方法，例如我将发布的解决方法，但这可能不是您想要的：

Section(header: Text("actions")) {
    HStack { // A that superView will handle the button click instead of the Section cell
        Button(
            action: {
                UserDefaults.standard.set(text, forKey: "TEXT_Key")
            },
            label: {
                Text("Save Data")
                    .frame(maxWidth: .infinity, alignment: .leading) //frame to infinity inside label will apply the button click area to the whole stack
            })
    }
}.buttonStyle(.borderless) //set a buttonStyle on the Section to display the animation correctly
// Clicking the button lightly will not make the classic section animation (turning to gray) but the text will toggle opacity as classic button do.

Answer 2

这个基于之前答案的解决方法有点适用于获得浅灰色背景动画：

import SwiftUI

struct ListButtonStyle: ButtonStyle {

func makeBody(configuration: Configuration) -> some View {
    configuration.label
        .background(
            Color(configuration.isPressed ? .systemGray4 : .secondarySystemGroupedBackground)
        )
        .animation(
            configuration.isPressed ?
                .easeInOut(duration: 0.05) :
                Animation.easeInOut(duration: 0.25).delay(0.1),
            value: configuration.isPressed
        )
}

}

struct ListButton<Label: View>: View {

var action: () -> Void
var label: () -> Label

var body: some View {
    ZStack {
        Button {
            action()
        } label: {
            label()
                .padding(.horizontal)
                .padding(.vertical, 11)
                .contentShape(Rectangle())
                .frame(maxWidth: .infinity)
        }
        .buttonStyle(ListButtonStyle())
    }
    .listRowInsets(EdgeInsets())
}
}

struct ContentView: View {

var body: some View {
    List {
        ListButton {
            // action
        } label: {
            Text("Button")
        }

    }
}

}