Is there a way to place a button between two Section rows?

Question

Created Dec ’23

Replies 2

Boosts 0

Participants 2

I want a button that will invert the values between Text1 and Text2. But my problem is: I want its center to be at the center of the rows, so essentially it would be exactly where the divider lies.

Form {
      Section {
            Text("Text 1")
                
            // button goes here
                
            Text("Text 2")
      }
}

I have tried a ZStack in Text1 with an offset, but this makes half of the button hide beneath Text2. I have also tried an overlay on Text 1 but the same thing happens, while an overlay on the entire Section gives me a button for each row.

I know there are ways to create my own "Section" view, but if there is a way to avoid this I would much prefer it because I find myself dealing with a lot of custom padding to attempt to resemble a real row, but it never looks the same.

Boost

Answer 1

Claude31 OP

Dec ’23

Could you tell where exactly you want the Button to appear ?

Capture d’écran 2023-12-14 à 09.28.34.png

The code for this display:

    var body: some View {
        Form {
            Section {
                Text("Text 1")
                
                Button(action: {
                    print("Tapped")
                }) {
                    Text("Button")
                }
                .frame(width: UIScreen.main.bounds.width, height: 14, alignment: .center)

                Text("Text 2")
            }
        }
    }

0

Answer 2

F99 OP

Dec ’23

Like this

Screenshot 2023-12-23 at 10.22.35 AM.png

0