【SwiftUI】View修飾子の適用順

ビューに様々な変更を適用するView修飾子ですが、適用する順番によって挙動が変わる事があります。
これはView修飾子が既存のビューのプロパティを変更しているのでは無く、変更を適用した新しいビューを毎回作成している事に関係します。

環境

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

【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15

次のコードで、サイズが200✕200で背景色が青色のTextビューが表示されます。

import SwiftUI

struct ContentView: View {

var body: some View {

Text("カピ通信")

.frame(width:200, height:200)

.background(Color.blue)

}

しかし、次にようにView修飾子の順番を入れ替えると、想定した表示にはなりません。

import SwiftUI

struct ContentView: View {

var body: some View {

Text("カピ通信")

.background(Color.blue)

.frame(width:200, height:200)

}

background(Color.blue)は元のビュー（Text）の背後に、青のColorビューを配置して新しいビューを作成します。
配置されるColorビューは元のビューのサイズに依存しますので、Textビューのデフォルトのサイズです。

frame(width:200, height:200）によってTextビューのフレームサイズを200×200に変更しますが、その前に適用されていた背後のColorビューは再描画されない為、見た目には変化がありません。

元のビューに変更を適用した新たなビューを作成するという特性を利用して、同じView修飾子を複数回適用する事が可能です。
先程のコードにbackground()を重複して適用したのが、次のコードです。

import SwiftUI

struct ContentView: View {

var body: some View {

Text("カピ通信")

.background(Color.blue)

.frame(width:200, height:200)

.background(Color.green)

}

思い通りの表示にならなかった時はView修飾子の適用順を疑ってみると良いかもしれません。