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

gorkyyrv  于 2023-07-01  发布在  iOS
关注(0)|答案(8)|浏览(117)

我正在使用Apple的SwiftUI框架创建iOS应用程序。因为我需要检测用户是否点击了屏幕的特定区域,所以我显然使用了一个按钮。
问题是,该区域包含一个图像和一个文本,并且由于按钮自动为其内容提供蓝色,因此图像也是彩色的,因此它只是一个蓝色圆角矩形而不是图像。
有人说,一个图像胜过千言万语,我不擅长解释,这里有一个图形演示所发生的事情:

**按钮外(无按钮样式)**x1c 0d1x
按钮内部(带按钮样式)

发生这种情况是因为按钮正在将.foregroundColor(.blue)添加到图像中。
如何避免/禁用按钮向其组件添加样式?

EDIT:这是我的按钮代码:

  • 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)
        }
    }
}
ilmyapht

ilmyapht1#

我认为这是从渲染模式的图像您正在使用。
如果你有Image("Cydia logo")(或其他)。
您应该设置渲染模式,如...

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

xxslljrj2#

您还可以在按钮上添加PlainButtonStyle(),以避免iOS风格的行为。
以你的例子为例:

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

希望对你有帮助!

6ovsh4lw

6ovsh4lw3#

另一种选择是不使用Button Package 器,而是使用tapAction directly on the Image在按下图像时触发操作

jhdbpxl9

jhdbpxl94#

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

ddarikpa5#

带图标的按钮!多么原始😀。如果你正在处理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.
        )
    }
3yhwsihp

3yhwsihp6#

将样式.plain应用于按钮以避免重叠颜色。

// Before
Button(...)

// After
Button(...)
.buttonStyle(.plain) // Remove the overlay color (blue) for images inside Button
  • .plain按钮样式,在空闲时不样式化或装饰其内容,但可以应用视觉效果来指示按钮的按下、聚焦或启用状态。

另一种解决方案是使用ButtonStyle自定义样式
喜欢:struct MyButtonStyle:ButtonStyle { }

unftdfkk

unftdfkk7#

如果你自己管理一个按钮的所有定制,那么使用.buttonStyle(.plain)是好的,但还不够,正如它的文档中所说,它只禁用了一些样式,而不是所有的样式。
也就是说,pressed仍然由SwiftUI管理。

如果你想在Button上从SwiftUI进行0修改,你必须创建一个自定义样式,它不做任何事情。

struct NoButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
    }
}

// Then use
// .buttonStyle(NoButtonStyle())
// And voila
j0pj023g

j0pj023g8#

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

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

相关问题