SwiftUI picker with a button in the navbar - swift

Question

On the track to learn more and more about SwiftUI. I come accross some weird behaviors.
I have a simple view called Modal. I am using a Picker in it and set a title in the navigation bar to go in the detail view.
That works fine. The problem starts when I add a button in the nav bar.
It end up looking like this
Without the + button
With the + button
And the code is the following:
ContentView.swift
import SwiftUI
struct ContentView: View {
#State var isShowing = false
var body: some View {
VStack(content: {
Button("Modal") {
isShowing = true
}
})
.sheet(isPresented: $isShowing, content: content)
}
#ViewBuilder
func content() -> some View {
Modal()
}
}
Modal.swift
import SwiftUI
import Combine
struct Modal: View {
#State var selection: String = ""
#State var list: [String] = ["1", "2", "3", "4", "5", "6"]
var body: some View {
NavigationView(content: {
Form(content: {
self.type()
})
.navigationBarTitle("Modal", displayMode: .inline)
})
}
}
private extension Modal {
func type() -> some View {
Section(content: {
Picker(selection: $selection, label: Text("Type").bold()) {
ForEach(list, id: \.self) { item in
Text(item)
.tag(UUID())
}
.navigationBarTitle("Select")
.navigationBarItems(trailing: button())
}
})
}
func button() -> some View {
HStack(alignment: .center, content: {
Button(action: {
// Action
}) {
Image(systemName: "plus")
}
})
}
}

Answer 1

This is because .navigationBarItems modifier generates flat view from dynamic ForEach views, attach instead it to one view inside ForEach, like
Section(content: {
Picker(selection: $selection, label: Text("Type").bold()) {
ForEach(list, id: \.self) { item in
if item == list.last {
Text(item)
.navigationBarTitle("Select")
.navigationBarItems(trailing: button())
.tag(UUID())
} else {
Text(item)
.tag(UUID())
}
}
}
})