带有 ForEach 的工具栏，在许多视图更改时消失

Question

I have a view with a toolbar. When the view changes (adding an element) the toolbar disappears. If the view is scrolled, the toolbar comes back. The example below has a NavigationStack, ScrollView, and VStack, however the problem occurs with just a VStack.

If the ForEach is replaced with discrete Buttons, all works fine.

//
// when the button is presed a Rectangle is shown, and the toolbar disapears
// If the view is scrolled, the toolbar comes back
// If the ForEach in the toolbar is commented out, the problam goes away.
//
// If the button is pressed and held (hilighted) the toolbar is shown until it is released
//
// Commenting out the NavigationStack, the ScrollView or both does not fix the problem.

import SwiftUI

struct ContentView: View {
    @State var showRect = false
    
    var theTools = [myTool(theTool:"highlighter"), myTool(theTool:"pencil")]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    Spacer()
                    Button("click me") { showRect.toggle() }

                    if (showRect){
                        Rectangle()
                            .fill(Color.red)
                            .frame(width:100, height:100)
                    }
                }
            }
            .frame(height: 500)
        }
        .toolbar {
            ToolbarItemGroup(placement: .bottomBar) {
                Spacer()
                // this code fails, comment out the ForEach block and it works
                ForEach(theTools) {aTool in
                    Button(action: {}) {
                        Image(systemName:aTool.theTool)
                            .resizable()
                            .frame(width: 30, height: 30)
                    }
                }
                // this code works
                Button(action: {}) {
                    Image(systemName:"hand.thumbsup.fill")
                        .resizable()
                        .frame(width: 30, height: 30)
                }
                Spacer()
            }
        }
    }
}

struct myTool: Identifiable
{
    let id:UUID = UUID()
    let theTool:String
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

I expected the toolbar to remain visible. My code has a lot more stuff in the VStack, but I was able to simplify down to this example.

I'm thinking this is either a "not supported" or a bug in SwiftUI.

I can hard code my tools, bit that seems like the wrong way to go.

Answer 1

Just move the toolbar to the ScrollView instead of the NavigationStack

import SwiftUI

@available(iOS 16.0, *)
struct LoopToolbatView: View {
    @State var showRect = false
    
    var theTools = [myTool(theTool:"highlighter"), myTool(theTool:"pencil")]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    Spacer()
                    Button("click me") { showRect.toggle() }
                    
                    if (showRect){
                        Rectangle()
                            .fill(Color.red)
                            .frame(width:100, height:100)
                    }
                }
            }
            .frame(height: 500)
            //HERE
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    Spacer()
                    // this code fails, comment out the ForEach block and it works
                    ForEach(theTools) {aTool in
                        Button(action: {}) {
                            Image(systemName:aTool.theTool)
                                .resizable()
                                .frame(width: 30, height: 30)
                        }
                    }
                    // this code works
                    Button(action: {}) {
                        Image(systemName:"hand.thumbsup.fill")
                            .resizable()
                            .frame(width: 30, height: 30)
                    }
                    //Spacer()
                }
            }
        }
    }
}