Styling differences in SwiftUI Button in list context: iOS 15 vs. earlier

Question

With this example:

struct ContentView: View {
    let items = ["Hello, world!"]
    var body: some View {
        List {
            Button(action: {
            }, label: {
                Text("Hello, world!")
            })
            .listRowBackground(Color.gray)
        }
    }
}

on iOS 14, this looks like:

on iOS 15, it now looks like:

It is rather surprising the number of styling differences:

The corner rounding: In iOS 15, but not earlier
The text color: In iOS 15, blue and white earlier.
The width of the view-- considerably narrower in iOS 15

Is this just an expected change with iOS 15?

Is there a standard way to not have these changes occur? I.e., to retain the earlier styling?

Apple changes UI style regularly in each new OS version, so as soon as you use default styles your app will look natively on OS. If you want to have unique persistent style, then develop and use everywhere your completely custom UI based on low level UI primitives. — Asperi, Oct 03 '21 at 05:29
What `low level UI primitives`? SwiftUI? UIKit? I've not experienced such major changes in UIKit. Do you know of documentation stating these changes? — Chris Prince, Oct 03 '21 at 19:30
I suggest to take a look at this interesting summary for further information about the iOS15 button system ⟹ https://a11y-guidelines.orange.com/en/mobile/ios/wwdc/nota11y/2021/2110064/ — XLE_22, May 03 '22 at 10:04

score 0 · Answer 1 · answered Oct 02 '21 at 19:43

0

Yes, Apple has changed its default UI elements states. This can also be seen in Safari where webpages have no CSS for forms.

answered Oct 02 '21 at 19:43

Osian

171
1
14

Do you know of documentation on these states? – Chris Prince Oct 02 '21 at 19:44
I haven't seen any "change documeation" from apple but to change the UI, you just need to change it from its default state – Osian Oct 02 '21 at 19:48

score 0 · Answer 2 · answered Oct 29 '21 at 03:11

The specific answer that helped me was the use of .listStyle. In my original code, I didn't use .listStyle, and apparently the default has changed. So, if I do:

struct ContentView: View {
    let items = ["Hello, world!"]
    var body: some View {
        List {
            Button(action: {
            }, label: {
                Text("Hello, world!")
            })
            .listRowBackground(Color.gray)
        }
        .listStyle(PlainListStyle())
    }
}

I get a result closer to what I want.

Apparently the .listStyle default is now insetGrouped, which is not what I wanted.

Styling differences in SwiftUI Button in list context: iOS 15 vs. earlier

2 Answers2