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

Question

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

在此处链接模拟图片，

在此处输入图像描述

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

在此处输入图像描述

，请检查链接的图片，

在子视图结构上制作的按钮图像并作为按钮标签调用，

另外我尝试了无边框按钮样式，背景颜色和前景色与超级视图和子视图相匹配。我什么也没得到，这里是代码，

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

这里是按钮代码

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

}

---

此处在更改背景颜色时添加另一张图片

在此处输入图像描述< /a>

你可以看到这三个按钮，对于没有背景颜色的顶部按钮，按钮区域填充灰色，如果我添加背景颜色 - 第二个按钮，它只填充内部，所以我将背景颜色更改为黑色的按钮字段，然后边框颜色发生变化。因此，我在按钮字段中添加了白色的背景色，但不起作用 - 第三个按钮:(。测试的手机是 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

按钮上的灰色/覆盖层来自按钮“色调”。

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

Button {
}
.buttonStyle(.plain)

截至今天Xcode 中存在错误，这就是为什么您无法在模拟器或预览中正确看到色调 。

更多解决方法示例：

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

Answer 2

在 MainList 中删除：

            .background(.white)