26
Swift
494 readers
1 users here now
This group focus on the content related to the development of Apple Eco-system software. So feel free to share and talk about, for example;
- Swift
- Xcode
- macOS, iOS, iPadOS...etc.
founded 2 years ago
MODERATORS
27
28
29
30
31
32
33
34
35
36
37
38
39
40
I am trying to build a macOS (14.6) app that uses a combination of List(_:selection:rowContent:) and Section(isExpanded:content:header:), and while it "works", it looks like garbage. When using .plain, there are list row/section seperators, and even when using .listRowSeparator(.hidden) or .listSectionSeparator(.hidden), there is always one separator that is still visible between the first item and the remaining items.
When I try to use .listStyle(.sidebar), it adds its own disclosure indicator, but on the right side of the list row. It's tolerable, though I'd prefer the indicator on the left and not to auto-hide when not being hovered.
The kicker is that regardless of the .listStyle() used, there seems to be spacing/padding between the sections that cannot be removed. In Apple's infinite wisdom, they added .listRowSpacing(), but decided macOS shouldn't get to use it.
I am still new to all of this, and would really appreciate any advice on how I can style my UI the way I need it to be. I am using SwiftUI, but if there is another method (maybe UIKit or somthing?), I'm open to suggestion.
Here is my playground code used to generate the screenshots:
import SwiftUI
import PlaygroundSupport
struct Content: Hashable, Identifiable {
var id: Self { self }
var header: String
var contents: [String]
}
struct ContentView: View {
var contents: [Content] = [
Content(header: "My Section 1", contents: ["Hello", "world"]),
Content(header: "My Section 2", contents: ["Foo", "bar"]),
Content(header: "My Section 3", contents: ["Help", "Me"]),
]
@State private var expanded: Set<Content> = []
@State private var selected: String?
var body: some View {
NavigationSplitView {
List(contents, selection: $selected) { content in
Section(isExpanded: Binding<Bool>(
get: { return expanded.contains(content) },
set: { expanding in
if expanding {
expanded.insert(content)
} else {
expanded.remove(content)
}
}
), content: {
ForEach(content.contents, id: \.self) { data in
Text(data)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.border(Color.orange)
}
}, header: {
Text(content.header)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.onTapGesture {
if expanded.contains(content) {
expanded.remove(content)
} else {
expanded.insert(content)
}
}
})
.listRowInsets(EdgeInsets(
top: 0,
leading: -2,
bottom: 0,
trailing: -14
))
}
} detail: {
ContentUnavailableView {
Label("No selection made", systemImage: "tray")
}
}
.border(Color.gray)
}
}
// Present the view in Playground
PlaygroundPage.current.setLiveView(ContentView())
Edit: 3 hours later... I was able to remove the spacing from the section content's items by using listRowInsets(_ insets:) and removing some of the padding I put in the code. But, I still do not know how to affect the section headers. I've updated the code above, and here's a new screenshot:
41
42
43
44
45
46
47
48
49
50