避免在 SwiftUI 中为其内容设置按钮样式

Question

我正在使用 Apple 的 SwiftUI 框架创建一个 iOS 应用程序。因为我需要检测用户是否点击了屏幕的特定区域，所以我显然使用了一个按钮。

问题是该区域包含一个图像和一个文本，并且由于按钮自动为其内容赋予蓝色，图像也是彩色的，所以它不是图像，而是一个蓝色的圆角矩形。

都说一图抵千言，我懒得解释了，给大家图解一下：

按钮外（无按钮样式）

按钮内部（带有按钮样式）

发生这种情况是因为按钮正在向图像添加 .foregroundColor(.blue)。

如何 avoid/disable 按钮为其组件添加样式？

编辑：这是我的按钮代码：

ContentView.swift:

Button(action: {/* other code */}) {
                    PackageManagerRow(packageManager: packageManagersData[0])
                }

PackageManagerRow.swift:

struct PackageManagerRow : View {
    var packageManager : PackageManager

    var body: some View {
        VStack {
            HStack {
                Image(packageManager.imageName)
                    .resizable()
                    .frame(width: 42.0, height: 42.0)
                Text(verbatim: packageManager.name)
                Spacer()
                Image(systemName: "checkmark")
                    .foregroundColor(.blue)
                    .opacity(0)
            }.padding(.bottom, 0)
            Divider()
                .padding(.top, -3)
        }
    }
}

Answer 1

我认为这是来自您正在使用的图像的渲染模式。

你有Image("Cydia logo")（或其他）的地方。

您应该将渲染模式设置为...

Image("Cydia Logo").renderingMode(.original)

Answer 2

HStack {
    Button(action: {
        print("Tapped")
     }, label: {
         Image("Logo").renderingMode(.original) // Add Rendering Mode
     })
    Text("Cydia")
}

Answer 3

另一种选择是不使用 Button 包装器，而是使用 tapAction directly on the Image 在按下图像时触发您的操作

Answer 4

您必须在图像声明后立即添加 .renderingMode(.original) 来渲染原始图像。

Image("your_image_name")
    .renderingMode(.original)

Answer 5

您还可以将 PlainButtonStyle() 添加到您的按钮以避免 iOS 样式行为。

与您的示例类似：

Button(action: {/* other code */}) {
                    PackageManagerRow(packageManager: packageManagersData[0])
                }.buttonStyle(PlainButtonStyle())

希望对您有所帮助！

Answer 6

一个带图标的按钮！多么原始。如果您正在处理 SF 符号，那么以下内容就可以了：

    Button(action: addItem) {
        Text(Image(systemName: "plus").renderingMode(.original))
            +
            Text("This is Plus")
    }
    .font(.system(size: 42))

上述选项的局限性在于您无法控制 Image 的大小。因此对于自定义图像，以下内容更合适：

    Button(action: addItem) {
        Label(
            title: { Text("Label").font(.system(size: 40)) }, // Any font you like
            icon: { Image(systemName: "rectangle.and.pencil.and.ellipsis") // Both custom and system images, i.e. `Image("Cydia logo")`
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 42, height: 42) // Any size you like
                .padding() // Any padding you need
                } // and etc.
        )
    }

避免在 SwiftUI 中为其内容设置按钮样式

Avoid button styling its content in SwiftUI

ios

swift

swiftui