開発環境

> xcodebuild -version
Xcode 14.0
Build version 14A309

モチベーション

SwiftUIのGroupを具体例を踏まえて理解しようと思って実験していたら意味わからんくなったので記事に残す。

SwiftUI.Group

Group | Apple Developer Documentation

HStack, VStack, Sectionのようにviewに影響を与えることなく、複数のviewを一つのインスタンスにまとめられる
Groupに適用したmodifierはGroupが持つ全ての子要素に対してそれぞれ影響を及ぼす

Use a group to collect multiple views into a single instance(A), without affecting the layout of those views(B), like an HStack, VStack, or Section would(C).

この文、個人的に手癖で翻訳に突っ込む前に英文読んだほうが良かった文章だった。ABに対してCがかかっているのではなく、Aに対してBCがかかっている。英語読もう。はい。Bの後のカンマがなければABに対してCがかかるようになるのかな。

これが、

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                Rectangle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.blue)
                Rectangle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.blue)
                Rectangle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.blue)
            }
        }
    }
}

こうまとめられる

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                Rectangle()
                Rectangle()
                Rectangle()
            }
            .frame(width: 50, height: 50)
            .foregroundColor(.blue)
        }
    }
}

VStackを剥がすと？

import SwiftUI

struct ContentView: View {
    var body: some View {
        Group {
            Rectangle()
            Rectangle()
            Rectangle()
        }
        .frame(width: 50, height: 50)
        .foregroundColor(.blue)
    }
}

上記を見ると、Rectangle3つの全体に対してframe modifilerがかかっているように見える。ということは必ずしもGroupに付与したmodifierはGroupの子要素に反映されるわけではない？また、上記のGroupをVStackに変えると同様の見た目になった。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
            Rectangle()
            Rectangle()
        }
        .frame(width: 50, height: 50)
        .foregroundColor(.blue)
    }
}

シンプルなVStackの利用のため、この挙動は理解できる。

以上を踏まえると、公式ドキュメントの以下の記述が実情と異なる？

After creating a group, any modifier you apply to the group affects all of that group’s members.

公式ドキュメントのサンプルコード

GroupのドキュメントのOverview項にVStackを使わないGroupのサンプルコードがあるが、手元で試すとGroupの子要素に対してmodifierが効いている。

import SwiftUI


struct ContentView: View {
    var body: some View {
        Group {
            Text("SwiftUI")
            Text("Combine")
            Text("Swift System")
        }
        .font(.headline)
    }
}