iOS 18 breaks design of SwiftUI Toggle buttons

  Kiến thức lập trình

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?

LEAVE A COMMENT