สำหรับ iOSรูปแบบรายการเริ่มต้น ( .automatic) .insetGroupedคือ

สไตล์.automaticรายการหมายความว่าเราทิ้งตัวเลือกสไตล์ไว้ในมือ SwiftUI SwiftUI จะเลือกอันที่เหมาะสมกับบริบท

ซึ่งอาจแตกต่างกันไปตามแพลตฟอร์ม เช่น iPhone, iPad, Mac หรือแม้แต่ตำแหน่งที่ใช้มุมมองรายการ

iOS ListStyles

SwiftUI รองรับสไตล์ที่หลากหลายซึ่งแตกต่างกันไปตามแพลตฟอร์ม

ในบทความนี้เราจะมุ่งเน้นไปที่ iOS เท่านั้น เรามีหกตัวเลือก

1. .อัตโนมัติ
2. .insetGrouped
3. .จัดกลุ่ม
4. .inset
5. .ธรรมดา
6. .แถบด้านข้าง

SwiftUI รองรับสไตล์ที่หลากหลายซึ่งแตกต่างกันไปตามแพลตฟอร์ม

ในบทความนี้เราจะมุ่งเน้นไปที่ iOS เท่านั้น เรามีหกตัวเลือก

1. .อัตโนมัติ
2. .insetGrouped
3. .จัดกลุ่ม
4. .inset
5. .ธรรมดา
6. .แถบด้านข้าง

NavigationStack {
    List {
        Section {
            Text("First")
            Text("Second")
            Text("Third")
        } header: {
            Text("First Section Header")
        } footer: {
            Text("Eos est eos consequatur nemo autem in qui rerum cumque consequatur natus corrupti quaerat et libero tempora.")
        }
        
        Section {
            Text("One")
            Text("Two")
            Text("Three")
        } header: {
            Text("Second Section Header")
        } footer: {
            Text("Tempora distinctio excepturi quasi distinctio est voluptates voluptate et dolor iste nisi voluptatem labore ipsum blanditiis sed sit suscipit est.")
        }
        
        Section {
            Text("1")
            Text("2")
            Text("3")
        } header: {
            Text("Third Section Header")
        } footer: {
            Text("Ea consequatur velit sequi voluptatibus officia maiores ducimus consequatur rerum enim omnis totam et voluptates eius consectetur rerum dolorem quis omnis ut ut.")
        }
    }
    .navigationTitle("List Style")
    // This is the only difference.
    .listStyle(.insetGrouped)
}

ตามที่กล่าวไว้ก่อนหน้านี้ SwiftUI จะใช้สไตล์ Inset Groupedเมื่อตั้งค่าอัตโนมัติ ( .automatic) หรือDefaultListStyleบน iOS

List {
    // ...
}
// Leave blank or .listStyle(.automatic) yield the same result in iOS.
.listStyle(.automatic)

ตัวอย่าง Inset Grouped .insetGroupedหรือInsetGroupedListStyle.

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

      
                

                    
                    
                
            

ตัวอย่าง Grouped .groupedหรือGroupedListStyle.

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

      
                

                    
                    
                
            

ตัวอย่าง Inset .insetหรือInsetListStyle.

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

      
                

                    
                    
                
            

ตัวอย่างของ Plain .plainหรือPlainListStyle.

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

      
                

                    
                    
                
            

สไตล์แถบด้านข้าง ( .sidebarหรือSidebarListStyle) มาพร้อมกับฟังก์ชันพิเศษ บน macOS และ iOS ลักษณะรายการแถบด้านข้างจะแสดงตัวบ่งชี้การเปิดเผยในส่วนหัวของ ส่วน ที่อนุญาตให้ผู้ใช้ยุบและขยายส่วน

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