SwiftUI：带图像的按钮在真实 iPhone 上有灰色边框，但在模拟模式下工作正常

Question

我正在尝试制作简单的应用程序，该应用程序似乎在模拟模式下运行良好，但在我的 iPhone 上测试按钮看起来与模拟模式不同 iPhone，

link这里是模拟图，

enter image description here

这是我在模拟中看到的但真实的 iPhone 看起来

enter image description here

请检查图片 linked，

在子 View 结构上制作的按钮图像并称为按钮标签，

另外我尝试了 borderlessbuttonstyle，背景和前景颜色匹配超级和子视图。我什么都没有，这里是代码，

我不知道如何删除灰色边框，不仅是这些按钮，还有我用于图像标签的所有按钮看起来都一样 - 边框为灰色矩形，

这里是按钮代码

struct MainList: View {
@EnvironmentObject var pageControl: PageControl
var body: some View {
    VStack{
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 0
            print("button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[0])
                .background(.white)
         }
        .buttonStyle(BorderlessButtonStyle())
        .foregroundColor(.white)

这是用于按钮标签的视图

struct mainListRow: View {
var actuator: Actuator
var body: some View {
    HStack(alignment: .center) {
        Image("home")
        Spacer()
        VStack {
            ZStack{
                RoundedRectangle(cornerRadius: 10.0)
                    .frame(width: 60, height: 30)
                    .foregroundColor(.red)
                Text(String(actuator.speed) + " %")
                    .foregroundColor(.white)
            }
        }
    }
}

}

这里在我改变背景颜色时添加另一张图片

enter image description here

如你所见，这三个按钮，对于没有背景颜色的顶部按钮，按钮区域填充灰色，如果我添加背景颜色 - 第二个按钮，它只填充内部，所以我改变了背景颜色到带有黑色的按钮字段，然后边框颜色发生变化。因此，我在按钮字段中添加了白色的背景颜色不起作用 - 第三个按钮:(。经过测试的 phone 是 iPhone Xs。这真的很奇怪，因为我提到它在模拟中工作正常。请。测试它是真实的 iPhone.

这里是第三张图片的代码，

            Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 0
            print("button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[0])
        }
        .buttonStyle(BorderlessButtonStyle())
        Divider()
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 1
            print("Rotate button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[1])
                .background(.white)
        }
        .background(.black)
        Divider()
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 2
            print("Rotate button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[2])
                .buttonStyle(BorderlessButtonStyle())
        }
        .background(.white)

并将按钮页面添加到主页面

struct testPage: View {
var body: some View {
    MainList()
        .frame(width: 330, height: 150)
        .padding(.top, 20)
}

}

Answer 1

在MainList中删除：

            .background(.white)

Answer 2

按钮上的gray/overlay来自按钮“tint”。

要删除它，请添加 .plain 修饰符：

Button {
}
.buttonStyle(.plain)

截至今天 Xcode 中存在错误，这就是您无法在模拟器或预览中正确看到色调的原因.

此处有更多解决方法示例：

https://hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink

SwiftUI：带图像的按钮在真实 iPhone 上有灰色边框，但在模拟模式下工作正常

SwiftUI: Button with image got gray border on real iPhone but works fine on simulation mode

label

view

button

ios

swiftui