😎

【SwiftUI】GroupBoxについて

2023/11/29に公開

Swift

SwiftUI

hig

tech

先日HIGを読んでいた時にGroupBoxというViewを知ったのですが、これがなかなか使い勝手のいいものだったので備忘録として残したいと思います。

Webデザインにおけるカードという認識で問題ないと思います。自動的に程よく余白、背景、角の丸みをつけてくれます。

以下の画像は、Appleのドキュメントのサンプルを日本人に馴染みのあるようなものに変えたものですが、実際は商品や図鑑のコンテンツを羅列するのに便利だと思います。

import SwiftUI

let text = """
サービス概要
当社のメールサービスは、高速で安全な電子メール通信を提供します。ユーザーは、このサービスを通じて個人的および業務上のメールを送受信できます。

データ保護とプライバシー
当社は、ユーザーのプライバシーとデータの安全性を最優先に考えています。個人情報は厳格に保護され、第三者に販売、共有、または開示されることはありません。詳細なプライバシーポリシーは、当社ウェブサイトでご覧いただけます。

利用規約
本サービスを利用することで、ユーザーは以下の条件に同意したものとみなされます：

不正アクセスやサービスの乱用を行わない。
法律に違反する活動にサービスを使用しない。
サービスの変更、停止、または終了に関して当社は予告なく行うことがあります。
当社は、利用規約を随時更新する権利を保有します。
更新と変更
当社は、サービスの改善のため、または法的要件に応じて、利用規約を更新することがあります。変更が行われた場合、ユーザーには通知が行われます。

連絡先情報
質問や懸念がある場合は、support@emailservice.comまでお問い合わせください。
"""

struct ContentView: View {
    var body: some View {
        GroupBox(label:
            Label("サービス利用規約の同意", systemImage: "building.columns")
        ) {
            ScrollView(.vertical, showsIndicators: true) {
                Text(text)
                    .font(.footnote)
                    .padding(5)
            }
            .frame(height: 150)
            .border(.tertiary)
            
            HStack {
                Text("上記の利用規約に同意します。")
                Spacer()
                Image(systemName: "checkmark.square")
            }
        }
        .padding(.horizontal)
    }
}

#Preview {
    ContentView()
}

Human Interface Guidelines/Boxes

SwiftUI/GroupBox

Discussion