Question

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

问题在于该区域包含一个图像和一个文本，并且随着按钮自动为其内容赋予蓝色，图像也被着色了，因此它不是图像而是一个蓝色的圆角矩形。

据说一张图像值一千个单词，而我不善于解释，这里有一个图形显示了发生的情况：

按钮外部（无按钮样式）

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

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

如何避免/禁用按钮在其组件中的添加样式？

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

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

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

与您的示例类似的东西：

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

我希望它将对您有帮助！

Answer 2

我认为这是您所使用图像的渲染模式。

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

带有图标的按钮！多么原始original。如果您正在处理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.
        )
    }

Answer 6

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

避免在SwiftUI中使用按钮样式化其内容

6 个答案: