I have to structure just a few textual content & picture buttons on keyboard toolbar, and wish to insert spacers to evenly lay them out. This labored on iOS 18. Nevertheless, on iOS 26, all are cluttered collectively. See image:
This is a minimal repro you may mess around with:
import SwiftUI
struct ContentView: View {
@State var textual content: String = ""
var physique: some View {
NavigationStack {
Listing {
TextField("Click on Me", textual content: $textual content)
Textual content("Hiya, world!").font(Font.system(measurement: 32))
Textual content("Hiya, world!").font(Font.system(measurement: 32))
Textual content("Hiya, world!").font(Font.system(measurement: 32))
Textual content("Hiya, world!").font(Font.system(measurement: 32))
Textual content("Hiya, world!").font(Font.system(measurement: 32))
}
.toolbar {
ToolbarItemGroup(placement: .topBarLeading) {
Button {
} label: {
Textual content("Toggle")
}
}
}
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
keyboardButtons
}
}
}
.navigationTitle("Hiya")
}
@ViewBuilder
personal var keyboardButtons: some View {
HStack {
SUITextButton("Button") {}
Spacer()
SUIImageButton(
picture: UIImage(
systemName: "chevron.left",
withConfiguration: UIImage.SymbolConfiguration(pointSize: 32, weight: .common, scale: .small)
)!,
enabled: true
) {}
Spacer()
SUIImageButton(
picture: UIImage(
systemName: "chevron.proper",
withConfiguration: UIImage.SymbolConfiguration(pointSize: 32, weight: .common, scale: .small)
)!,
enabled: true
) {}
Spacer()
SUITextButton("Button") {}
}
}
}
#Preview {
ContentView()
}
public struct SUITextButton: View {
personal let title: String
personal let motion: () -> Void
personal let enabled: Bool
public init(_ title: String, enabled: Bool = true, motion: @escaping () -> Void) {
self.title = title
self.enabled = enabled
self.motion = motion
}
public var physique: some View {
Button(title, motion: motion)
}
}
public struct SUIImageButton: View {
public init(picture: UIImage, enabled: Bool, motion: @escaping () -> Void) {
self.picture = picture
self.enabled = enabled
self.motion = motion
}
personal let picture: UIImage
personal let enabled: Bool
personal let motion: () -> Void
public var physique: some View {
Button(motion: motion) {
SUIImage(
uiImage: picture,
// Because it's within a button, will probably be blue when enabled, and grey when disabled.
rendering: .systemTint)
}
}
}
public struct SUIImage: View {
public enum Rendering {
case systemTint
case customColor(coloration: UIColor)
case authentic
}
personal let uiImage: UIImage
personal let rendering: Rendering
public init(uiImage: UIImage, rendering: Rendering) {
self.uiImage = uiImage
self.rendering = rendering
}
public var physique: some View {
let width: CGFloat = 18.0 + (2.0 / 3.0)
let top: CGFloat = 26.0 + (2.0 / 3.0)
Picture(uiImage: uiImage)
.renderingMode(.template)
}
}
Setting UIDesignRequriesCompatibility flag labored, however I want glass impact for different elements of my app (and I believe it seems higher with glass impact above keyboard). In order that’s not an possibility.


