🪶
SwiftUI Group View

2024/09/20に公開
 What Groupofficial
公式とSwiftポケットリファレンスという書籍を参考にUIのグループ化をやってみた。
Group

A type that collects multiple instances of a content type — like views, scenes, or commands — into a single unit.
グループ

ビュー、シーン、コマンドなど、コンテンツタイプの複数のインスタンスを1つのユニットに集めたタイプ。
Overview

Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would. After creating a group, any modifier you apply to the group affects all of that group’s members. For example, the following code applies the headline font to three views in a group.
概要

グループを使用すると、HStack、VStack、Section のようにビューのレイアウトに影響を与えることなく、複数のビューを 1 つのインスタンスにまとめることができます。グループを作成した後、グループに適用する修飾子は、そのグループのすべてのメンバーに影響します。例えば、次のコードは、グループ内の3つのビューに見出しフォントを適用します。
Group {
    Text("SwiftUI")
    Text("Combine")
    Text("Swift System")
}
.font(.headline)
example
import SwiftUI

struct GroupExampleView: View {
    var body: some View {
        VStack {
            Group {
                Text("SwiftUI")
                Text("Language: Swift")
            }.font(.title)
        }
        
        Group {
            Text("iOS13.0")
            Text("iPadOS 13.0+")
        }.foregroundStyle(Color.gray)
    }
}

#Preview {
    GroupExampleView()
}

 最後にやってみた感想ですが、FlutterでColumnの中にColumnを配置しているような感覚ですね。HTML, CSSならGridがネストしたような感じでしょうか。

複数のViewをグループ化してレイアウトができるようになるメリットがありました。
What Group

最後に

Discussion
