I'm trying to make simple app, the app seems working well on simulation mode, but test on my iPhone the button looks different from simulation iPhone,

link the simulation picture here,

enter image description here

this is the what I see on the simulation but real iPhone looks

enter image description here

please, check the pictures linked,

The button image made on sub View struct and called as a Button label,

plus I tried borderlessbuttonstyle, back and foreground color match both super, and child view. I got nothing, here the code,

I don't know how to delete the gray border not only these buttons but also all buttons that I used with image labeling looks the same way - bordered with gray rectangle,

here the button code

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)

 

and this is the View that used to button label

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

}

here add the another picture when I change the background color

enter image description here

as you can see that those three buttons, for the top button without background color, the button area is filled gray color, if I add background color - second button, it only filled inside, so I changed the background color to button field with black then the border color changed. thus I add the background color with white at button field not working - third button :(. the tested phone is iPhone Xs. this is really weird as I mentioned it work fine on simulation. please. test it on real iPhone.

here the code for third picture,

            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)

and the the button page added to main here

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

}

CodePudding user response：

in MainList get rid of:

            .background(.white)