Search code examples
swiftuiwatchkitswiftui-navigationlink

Adjust padding/margins for NavigationLink in Section on Watch

My Section original had a Text object only. When I replaced it with a NavigationLink so that tapping on it would lead to another view, suddenly the Section ballooned up in size, adding both padding and margins. I've tried .padding(0) and everything else I could think of, but the NavigationLink insists on being an oversized bubble.

var body: some View {
    List {
        Section(header:
                    NavigationLink("Section Title", destination: OrgChooserView())) {
            ForEach(model.metrics, id: \.displaySequence) { metric in
                MetricRowView(metric: metric)
            }
        }
    }
    .navigationTitle("Test").accentColor(.orange)
}

With NavigationLink in Section:

enter image description here

With Text in Section:

enter image description here

I'd be grateful for any assistance on either removing the visible bubble that surrounds the section header, or adjusting its padding and margins.

Thanks.

Solution

  • Apply .buttonStyle(.plain) to your NavigationLink to remove the padding and background. You’ll also lose a button’s default tinting and “touch down” effects, so you’ll have to recreate them if you need them.