【SwiftUI】Modifierの適用順

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

スポンサーリンク

環境

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

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

解説

次のような背景色が青色でサイズが200×200のText Viewを表示させてみます。

図:期待する表示

次のようなコードを書いて、実行すると・・・

残念ながら想定した表示になりません。

図:実際の表示

background(Color.blue)は元のView(Text)の背後に、青のColor Viewを配置した新しいViewを作成します。
配置されるColor Viewは元のViewのサイズに依存しますので、Text Viewのデフォルトのサイズです。
frame(width:200, height:200)によってText Viewのフレームサイズを200×200に変更しますが、その前に適用されていた背後のColor Viewは再描画されない為、見た目には変化がありません。

実際には次のようにModifierの順番を入れ替える事で、期待通りの表示になります。

Modifierの重複適用

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

図:Modifierの重複適用

最後に

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

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

コメント