避免在 SwiftUI 中设置其内容的按钮样式答案

【问题标题】：Avoid button styling its content in SwiftUI避免在 SwiftUI 中设置其内容的按钮样式
【发布时间】：2019-07-08 09:26:07
【问题描述】：

我正在使用 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)
        }
    }
}

【问题讨论】：

你能显示你用来创建按钮的代码吗？
@Fogmeister 当然，看看我的编辑。

标签： ios swift swiftui

【解决方案1】：

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

Image("Cydia logo")（或其他）在哪里。

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

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

【讨论】：

当我将此方法添加到我的图像时，它会在我设置图像大小的部分出现错误：'Double' is not convertible to 'Length?' （又名“可选”）
@iAlex11 是不是加尺寸后加渲染模式？
哦，好的，谢谢。你能解释一下为什么会这样吗？谢谢，很抱歉打扰您。

【解决方案2】：

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

与您的示例类似：

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

希望对你有帮助！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

从接受的答案中很好地复制粘贴！
你问了 62 个问题，只回答了 02 个？
至少我的答案不是抄袭，你很难过
我的没有拼写错误
@FatehKhan 我报告了这个答案，你对新用户是种族主义者，你不应该复制粘贴答案，这很尴尬......

【解决方案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.
        )
    }

【讨论】：