iOS 18 update causes toolbar display regression

Question

Created 2w

Replies 3

Boosts 0

Participants 2

Hi there, I'm having an app developed in the last weeks, and recently I'm testing it on iOS 18. This following piece of UI code has diff between iOS 18 and iOS version lower than 18.

I have a NavigationStack in my homeView, and the display difference is for its toolbar in one destination. I've tried both approaches in code, with header variable or ToolbarItemGroup used directly in the toolbar modifier, both would result in there being a spacer between the body VStack and toolbar, which is unexpected. Here's the code and a demo screenshot.

    var body: some View {
        // header
        VStack(alignment: .leading) {
            notificationView(
                iconKey: "ErrorCircle",
                contentKey: "receivedFile.notification.noNetwork.content"
            )

            fileListView
        }
        .toolbar {
            // header

            ToolbarItemGroup(placement: .principal) {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "chevron.backward")
                }
                .background(Color.yellow)

                Spacer()

                Text(LocalizedStringKey("title"))
                    .font(
                        .system(size: 17)
                        .weight(.semibold)
                    )
                    .background(Color.yellow)

                Spacer()

                Button {
                    print("click")
                } label: {
                    Text("Click")
                }
                .background(Color.yellow)
            }
        }
        .navigationBarBackButtonHidden()
        .onAppear {
            refreshAllFiles()
        }
    }

    @ToolbarContentBuilder private var header: some ToolbarContent {
        ToolbarItem(placement: .topBarLeading) {
            Button {
                dismiss()
            } label: {
                Image(systemName: "chevron.backward")
            }
            .background(Color.yellow)
        }


        ToolbarItem(placement: .principal) {
            Text(LocalizedStringKey("receivedFileList.title"))
                .font(
                    .system(size: 17)
                    .weight(.semibold)
                )
                .background(Color.yellow)
        }


        ToolbarItem(placement: .topBarTrailing) {
            Button {
                print("click for jumping")
            } label: {
                Text("Click for jumping")
            }
            .background(Color.yellow)
        }

    }

Hope I can get some help from the forum on the usage. If not fixable, may I know if this is a known issue that would be fixed in the next upgrades.

Boost

Answer 1

OliverShen OP

2w

The only work solution for me now is to remove Spacer in code above, see below:

     .toolbar {
//            header
            ToolbarItemGroup {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "chevron.backward")
                }
                .background(Color.yellow)

                Text(LocalizedStringKey("title"))
                    .font(
                        .system(size: 17)
                        .weight(.semibold)
                    )
                    .background(Color.yellow)

                Button {
                    print("click")
                } label: {
                    Text("Click")
                }
                .background(Color.yellow)
            }
        }

But the elements will no surprisingly lie in the corner.

0

Answer 2

DTS Engineer OP

Apple

2w

@OliverShen Could you try setting .navigationBarTitleDisplayMode(.inline) and .listStyle(.plain)

   var body: some View {
          // header
          VStack(alignment: .leading) {
              Text("hello world")
                  .background(Color.red)
              List {
                 ....
              }
              .listStyle(.plain)
              .navigationBarTitleDisplayMode(.inline)
          }
          .toolbar {
              header
          }
          .navigationBarBackButtonHidden()
      }

0

Answer 3

OliverShen OP

2w

Hi @DTS Engineer thanks this helps! Do you know why not using inline mode would result in the blank field? Is there some invisible spacing between toolbar and the first sub-element it modifies?

0