【SwiftUI】Viewの分割

（2020/03/10 更新）

複雑なViewを小さなViewに分割する事で、繰り返しを避け、ソースを見やすくする方法を紹介します。
Viewを分割してもパフォーマンスに大きな影響を及ぼさないのがSwiftUIの特徴の一つです。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

SwiftUIではViewをプロパティに代入して、コンテナ内で使用できます。
定義したプロパティに対して、さらにModifierを適用可能です。

struct ContentView: View {

// 枠線付きText Viewをプロパティ化

let textWithBorder: some View = Text("カピ通信")

.font(.largeTitle)

.padding()

.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 4))

var body: some View {

HStack(spacing: 50) {

// プロパティ化したViewにModifierを適用

textWithBorder

.foregroundColor(.green)

textWithBorder

.foregroundColor(.blue)

}

この例では、枠付きTextをプロパティtextWithBorderに代入した後、Modifierを適用して個別に色を変えています。

使用上の注意点としては、他のプロパティを参照するような記述をプロパティに含められません。これは、オブジェクトの作成時に問題が発生する為です。
そのような場合は、次に紹介するカスタムViewで実現します。

カスタムViewでは、引数が指定できる等、より複雑な制御が可能です。
以下は、テキストを引数で指定可能な枠付きTextを表示するカスタムViewの作成例です。

struct ContentView: View {

var body: some View {

HStack(spacing: 50) {

TextWithBorder(text: "Apple")

.foregroundColor(.green)

TextWithBorder(text: "SwiftUI")

.foregroundColor(.blue)

}

// 枠線付きText表示のカスタムView定義

struct TextWithBorder: View {

var text: String

var body:some View {

Text(text)

.font(.largeTitle)

.padding()

.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 4))

}