Xcode 12.0 B2 SwiftUI - Bottom toolbar after List in ContentView no longer displays.

Question

Created Jul ’20

Replies 3

Boosts 0

Views 1.8k

Participants 2

This code worked in Xcode 12.0 B1 but no longer works in B2.

struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach (1..<10) {
row in
Text("\(row) - Test").foregroundColor(Color.white).fontWeight(.bold)
}
.listRowBackground(Color.burgundy)
}
.navigationTitle(Text("List Background Color Test"))
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .bottomBar) {
HStack {
Button(action: {}, label: {
Text("One").foregroundColor(Color.white)
})
Spacer()
Button(action: {}, label: {
Text("Two").foregroundColor(Color.white)
})
Spacer()
Button(action: {}, label: {
Text("Three").foregroundColor(Color.white)
}).foregroundColor(.blue)
}
}
}
}
}
}

Answered by jpcoates in 620720022

Apparently, it needs to be like this now, with each being embedded in a separate ToolbarItem including Spacer() - (found this while searching UIToolbar in SwiftUI):

.toolbar {
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("One")
})
}
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("Two")
})
}
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("Three")
})
}
}

Boost

Answer 1

jpcoates OP

Jul ’20

I just discovered, if I comment out the two Spacer() views, I can see the buttons again.

0

Answer 2

jpcoates OP

Jul ’20

Accepted Answer

Apparently, it needs to be like this now, with each being embedded in a separate ToolbarItem including Spacer() - (found this while searching UIToolbar in SwiftUI):

.toolbar {
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("One")
})
}
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("Two")
})
}
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("Three")
})
}
}

1

Answer 3

Iomegano OP

Dec ’21

You could als just use ToolbarItemGroup:

struct ContentView: View {
  var body: some View {
    NavigationView {
      List {
        ForEach (1..<10) {
          row in
          Text("\(row) - Test").foregroundColor(Color.white).fontWeight(.bold)
        }
        .listRowBackground(Color.burgundy)
      }      
      .navigationTitle(Text("List Background Color Test"))
      .navigationBarTitleDisplayMode(.inline)
      .toolbar {
        ToolbarItemGroup(placement: .bottomBar) {
          HStack {
            Button(action: {}, label: {
              Text("One").foregroundColor(Color.white)
            })
            Spacer()
            Button(action: {}, label: {
              Text("Two").foregroundColor(Color.white)
            })
            Spacer()
            Button(action: {}, label: {
              Text("Three").foregroundColor(Color.white)
            }).foregroundColor(.blue)
          }
        }
      }      
    }            
  }
}

0