iOS 18 breaks design of SwiftUI Toggle buttons (Edit: fixed by Apple)

Question

Update: Appears to be fixed with iOS 18 beta 5 (or earlier).

inside a List, I have a simple Toggle. I use this in the main column of a NavigationSplitView.

The following is the complete runnable simplified code that demonstrates the problem:

import SwiftUI
struct ContentView: View {
    @State private  var on = true
    @State private var visibility: NavigationSplitViewVisibility = .all

    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            List {
                Text(getCurrentiOSVersion())
                Toggle(isOn: $on) {
                    Text("Some long talkative text explaing way more than I should in a toggle")
                }
            }
        } detail: {
        }
        .navigationSplitViewStyle(.balanced)

    }
    
    func getCurrentiOSVersion() -> String {
        let systemVersion = UIDevice.current.systemVersion
        return "iOS Version: \(systemVersion)"
    }
}

#Preview {
    ContentView()
}

running on iOS 16 or 17, it looks like this:

running on iOS 18, it looks like this:

On iOS 18, with different text lengths, the toggle Button is sometimes rendered on the left and sometimes on the right, which I find ugly.

Any idea what I can do that the Button is always trailing like with iOS 16 and iOS 17?

Answer 1

Seems like a new default behavior!

Try mimicking the previous one yourself like:

HStack { // 👈 Make sure this will be stacked horizontally
    Text("Some long talkative text explaing way more than I should in a toggle") // 👈 Add the leading text in place
        .frame(maxWidth: .infinity, alignment: .leading) // 👈 Make it always fill the space
    Toggle(isOn: $on) {
        Text("Some long talkative text explaing way more than I should in a toggle")
    }
    .labelsHidden() // 👈 Hides the default label keeping the accessibility stuff
}

P.S.: You have a typo in explaing