根据禁用与否更改 SwiftUI 中按钮的 colored颜色

我猜你想要这个:

可以为按钮 colored颜色 添加计算(computed)属性，并将该属性传递给按钮的foregroundColor修改器.也可以在HStack周围使用单个padding修改器，而不是在其子视图上使用单独的padding.

struct ContentView : View {
    @State var chatMessage: String = ""

    var body: some View {
        HStack {
            TextField($chatMessage, placeholder: Text("Reply"))
                .textFieldStyle(.roundedBorder)
            Button(action: sendMessage) {
                Image(systemName: "arrow.up.circle")
                    .foregroundColor(buttonColor)
            }
                .disabled(!chatMessageIsValid)
        }
            .padding([.leading, .trailing], 10)
    }

    var chatMessageIsValid: Bool {
        return !chatMessage.isEmpty
    }

    var buttonColor: Color {
        return chatMessageIsValid ? .accentColor : .gray
    }

    func sendMessage() {
        chatMessage = ""
    }
}

However，这里根本不应该使用foregroundColor修饰符.你应该使用accentColor修饰符.使用accentColor有两个好处:

• 当Button启用时，Image将自动使用环境的accentColor，当Button禁用时，Image将自动使用环境的accentColor.你根本不需要计算 colored颜色 .

• 您可以在View层次 struct 的较高位置设置环境中的accentColor，它将向下渗透到所有后代.这使得为整个界面设置统一的强调色变得很容易.

在下面的示例中，我将accentColor修饰符放在HStack上.在真正的应用程序中，您可能会在整个应用程序的根视图上设置它:

struct ContentView : View {
    @State var chatMessage: String = ""

    var body: some View {
        HStack {
            TextField($chatMessage, placeholder: Text("Reply"))
                .textFieldStyle(.roundedBorder)
            Button(action: sendMessage) {
                Image(systemName: "arrow.up.circle")
            }
                .disabled(!chatMessageIsValid)
        }
            .padding([.leading, .trailing], 10)
            .accentColor(.orange)
    }

    var chatMessageIsValid: Bool {
        return !chatMessage.isEmpty
    }

    func sendMessage() {
        chatMessage = ""
    }
}

发送到马特自己的 idea ，也可能是马特的智能按钮类型.它可以轻松地做一些漂亮的事情，比如在用户单击它时为其设置动画:

以下是代码:

struct ContentView : View {
    @State var chatMessage: String = ""

    var body: some View {
        HStack {
            TextField($chatMessage, placeholder: Text("Reply"))
                .textFieldStyle(.roundedBorder)
            SendButton(action: sendMessage, isDisabled: chatMessage.isEmpty)
        }
            .padding([.leading, .trailing], 10)
            .accentColor(.orange)
    }

    func sendMessage() {
        chatMessage = ""
    }
}

struct SendButton: View {
    let action: () -> ()
    let isDisabled: Bool

    var body: some View {
            Button(action: {
                withAnimation {
                    self.action()
                    self.clickCount += 1
                }
            }) {
                Image(systemName: "arrow.up.circle")
                    .rotationEffect(.radians(2 * Double.pi * clickCount))
                    .animation(.basic(curve: .easeOut))
            }
                .disabled(isDisabled)
    }

    @State private var clickCount: Double = 0
}