ビューに様々な変更を適用するView修飾子ですが、適用する順番によって挙動が変わる事があります。
これはView修飾子が既存のビューのプロパティを変更しているのでは無く、変更を適用した新しいビューを毎回作成している事に関係します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
解説
次のコードで、サイズが200✕200で背景色が青色のTextビューが表示されます。
1 2 3 4 5 6 7 8 9 10 11 |
import SwiftUI struct ContentView: View { var body: some View { Text("カピ通信") .frame(width:200, height:200) .background(Color.blue) } } |
しかし、次にようにView修飾子の順番を入れ替えると、想定した表示にはなりません。
1 2 3 4 5 6 7 8 9 10 11 |
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修飾子の重複適用
元のビューに変更を適用した新たなビューを作成するという特性を利用して、同じView修飾子を複数回適用する事が可能です。
先程のコードにbackground()を重複して適用したのが、次のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 |
import SwiftUI struct ContentView: View { var body: some View { Text("カピ通信") .background(Color.blue) .frame(width:200, height:200) .background(Color.green) } } |
最後に
思い通りの表示にならなかった時はView修飾子の適用順を疑ってみると良いかもしれません。
コメント