Swift UI の ListStyle

May 08 2023
iOS の場合、デフォルトのリスト スタイル (.automatic ) は です。

iOS の場合、デフォルトのリスト スタイル ( .automatic) は です.insetGrouped

リスト.automaticスタイルは、スタイルの選択を SwiftUI の手に任せたことを意味します。SwiftUI は、コンテキストに適したものを選択します。

これは、iPhone、iPad、Mac などのプラットフォームや、リスト ビューが使用されている場所によって異なる場合があります。

iOS リストスタイル

SwiftUI は、プラットフォームによって異なる多くのスタイルをサポートしています。

この記事では、iOS のみに焦点を当てます。6 つのオプションがあります。

  1. .自動
  2. .insetGrouped
  3. .グループ化
  4. .はめ込み
  5. 。プレーン
  6. .サイドバー

SwiftUI は、プラットフォームによって異なる多くのスタイルをサポートしています。

この記事では、iOS のみに焦点を当てます。6 つのオプションがあります。

  1. .自動
  2. .insetGrouped
  3. .グループ化
  4. .はめ込み
  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 は、自動 ( ) を設定する場合、またはiOS でInset Grouped スタイルを使用します。.automaticDefaultListStyle

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

.insetGroupedグループ化されたインセットまたはの例InsetGroupedListStyle

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

      
                

.groupedグループ化されたまたはの例GroupedListStyle

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

      
                

.insetインセットまたはの例InsetListStyle

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

      
                

.plainプレーンまたはの例PlainListStyle

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

      
                

サイドバー スタイル (.sidebarまたは) には特別な機能SidebarListStyleが備わっています。macOS および iOS では、サイドバー リスト スタイルにより、ユーザーがセクションを折りたたんだり展開したりできるようにするセクション ヘッダー開示インジケーターが表示されます

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