【SwiftUI】View修飾子の適用順

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

スポンサーリンク

環境

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

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

解説

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

【図1:Textビューの表示】

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

【図2:Textビューの表示(失敗例)】

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

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

View修飾子の重複適用

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

【図3:View修飾子の重複適用】

最後に

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

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント