Different .listStyle() on iOS and WatchOS in a reusable component?

Question

I'd love to reuse a list layout between iOS and WatchOS, but InsetGroupedListStyle() isn't available on WatchOS.

What would be a good way to create a helper that would conditionally return InsetGroupedListStyle() on iOS and eg. PlainListStyle() on WatchOS?

I tried this, but get an error that I cannot return ListStyle (which is probably caused by SwiftUI needing to know a specific type in compile time).

View.swift

List {
    // ...
}
.listStyle(MyInsetGroupedListStyle())

Helpers.swift

public func MyInsetGroupedListStyle() -> ListStyle {
    #if os(watchOS)
        return PlainListStyle()
    #else
        return InsetGroupedListStyle()
    #endif
}

Alternate way could be specifying the listStyle inline, but swift doesn't support conditional compilation in expressions:

View.swift

List {
    // ...
}
.listStyle(#if os(watchOS) PlainListStyle() #else InsetGroupedListStyle() #endif)

I asked almost the exact same thing a while ago! You need to return an opaque type: https://stackoverflow.com/a/64635065/14351818 — aheze, Apr 12 '21 at 14:58

score 3 · Accepted Answer · answered Apr 12 '21 at 14:06

You can achieve what you want using an extension on View. This allows you to add the listStyle modifier with the parameter that you want for the OS that you want.

extension View {
    public func customListStyle() -> some View {
        #if os(watchOS)
        return self.listStyle(PlainListStyle())
        #else
        return self.listStyle(InsetGroupedListStyle())
        #endif
    }
}

You would then use it like this:

List {
    // items in list go here
}
.customListStyle()

Thank you for a help with this pattern! – Tomáš Kafka Apr 15 '21 at 15:50 — Tomáš Kafka, Apr 15 '21 at 15:50

score 1 · Answer 2 · answered Apr 12 '21 at 17:17

1

Use

an opaque type

public var myInsetGroupedListStyle: some ListStyle {
  #if os(watchOS)
  PlainListStyle()
  #else
  InsetGroupedListStyle()
  #endif
}

a closure

listStyle( {
  #if os(watchOS)
  PlainListStyle()
  #else
  InsetGroupedListStyle()
  #endif
} () )

answered Apr 12 '21 at 17:17

1

Thank you! Too bad I had to only choose one answer, as both yours and Andrews are great and useful. – Tomáš Kafka Apr 15 '21 at 15:51

Different .listStyle() on iOS and WatchOS in a reusable component?

2 Answers2