🪶
SwiftUI GroupBox

2024/09/20に公開
 視覚的にグループ化するofficial
GroupBox

A stylized view, with an optional label, that visually collects a logical grouping of content.
グループボックス

コンテンツの論理的なグループ化を視覚的に収集する、任意のラベルを持つ様式化されたビュー。
Overview

Use a group box when you want to visually distinguish a portion of your user interface with an optional title for the boxed content.
The following example sets up a GroupBox with the label “End-User Agreement”, and a long agreementText string in a Text view wrapped by a ScrollView. The box also contains a Toggle for the user to interact with after reading the text.
概要

グループボックスは、ユーザーインターフェイスの一部を視覚的に区別したい場合に使用します。
次の例では、「End-User Agreement 」というラベルと長いagreementText文字列を持つグループボックスを、ScrollViewでラップされたTextビューに設定しています。また、このボックスには、テキストを読んだ後にユーザーが操作するためのToggleが含まれています。
var body: some View {
    GroupBox(label:
        Label("End-User Agreement", systemImage: "building.columns")
    ) {
        ScrollView(.vertical, showsIndicators: true) {
            Text(agreementText)
                .font(.footnote)
        }
        .frame(height: 100)
        Toggle(isOn: $userAgreed) {
            Text("I agree to the above terms")
        }
    }
}
GroupBoxを使うとボタンやスイッチなどのオブジェクトをエリアごとにグループ化してレイアウトを整えてくれます。iPhone開いたら表示されている設定画面のようなUIが作れます。

 exampleimport SwiftUI

/**
 GroupBox構造体は、UIの一部をグループ化して視覚的に区別する構造体を管理する。
 */
struct GroupBoxExampleView: View {
    @State private var setting1: Bool = true
    @State private var setting2: Bool = true
    @State private var setting3: Bool = true
    
    var body: some View {
        Form {
          // 視覚的にグループ化
            VStack {
                GroupBox("Settings") {
                    VStack(spacing: 8) {
                        Toggle("Push", isOn: $setting1)
                        Toggle("SNS", isOn: $setting2)
                        Toggle("E-mail", isOn: $setting3)
                    }
                }
                
                // ラベルを指定してグループ化
                Section {
                    GroupBox(label: Label("注意", systemImage: "exclamationmark.triangle")) {
                        HStack {
                            Text("どれか１つONにしてください")
                                .padding()
                        Spacer()
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    GroupBoxExampleView()
}

 最後に設定画面を作成するときに、GroupBoxを活用すると綺麗なUIを作ることができます。標準機能で作らないと見た目が変になってバランスが崩れるので、iOSらしいUIを作るなら、GroupBoxを活用しましょう。実は私以前思いつきで部品並べて設定画面作ってました😅
視覚的にグループ化する

example

最後に

Discussion
