Using List View in SwiftUI, we can achieve the iOS Style Settings view. We have to use GroupedListStyle modifier in List to make the list look like the iOS Settings app. And we can add sections to organize settings into different categories, such as “Account”, “Notifications”, and “General”. Here is a complete example:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
// Account Section
Section(header: Text("ACCOUNT")) {
NavigationLink(destination: Text("Profile Details")) {
HStack {
Image(systemName: "person.circle")
.foregroundColor(.blue)
Text("Profile")
}
}
NavigationLink(destination: Text("Account Settings")) {
HStack {
Image(systemName: "gear")
.foregroundColor(.gray)
Text("Account Settings")
}
}
}
// Notifications Section
Section(header: Text("NOTIFICATIONS")) {
Toggle(isOn: .constant(true)) {
HStack {
Image(systemName: "bell.fill")
.foregroundColor(.orange)
Text("Push Notifications")
}
}
}
// General Section
Section(header: Text("GENERAL")) {
NavigationLink(destination: Text("Privacy Policy")) {
HStack {
Image(systemName: "lock.fill")
.foregroundColor(.red)
Text("Privacy Policy")
}
}
NavigationLink(destination: Text("Terms of Service")) {
HStack {
Image(systemName: "doc.text.fill")
.foregroundColor(.green)
Text("Terms of Service")
}
}
}
}
.listStyle(GroupedListStyle()) // Use grouped style for iOS-like appearance
.navigationTitle("Settings")
}
}
}
#Preview {
ContentView()
}
Output:
