[SwiftUI] position と offset

SwiftUI

SwiftUIで、要素を配置するときに、offset と position を使って位置を指定することができます。

知りたいこと:position と offset に違いはあるか?

もちろん、違いはあるんでしょうけど、どんな影響があるのか調べてみました。

テキストを表示して調べてみました。

Text表示

テキストを表示するコード

offset

表示位置を移動させることができる modifier です。

Offset での移動後にもBackgroundを使って背景色を変えると効果がわかりやすいです。

Offset

offsetを使ったコード

offset の考察

Offset は、そこまでの結果の表示位置を変更することがわかります。ですので、そこまでに作成されたテキスト(Hello, World!)や背景色(赤)は移動して描画されますが、offset 後に指定された背景色(オレンジ)は、移動されずに残ります。

position

Positionで移動させてみましょう。

Positionで指定

positionで位置指定するコード

position の考察

背景が青一色になることから、position は、与えられた領域をできる限り大きく使うことがわかります。

ですので、position 指定以降は、そのサイズを取得しても、テキストのサイズは取れないことになります。

position と offset を両方使ってみる: offset -> position

実際には、あまり使わないと思いますが、両方つかってどうなるかみてみました。
offset -> position の順で使ってみました。

Offset -> Position

”offset

offset -> position 順での考察

positionで位置指定されたところから、offsetされることがわかります。

position と offset を両方使ってみる: position -> offset

今度は、position 指定した後に、offset してみます。

position -> offset

position -> offset 順での考察

position が最初に適用されているため、背景色がオレンジ、青共に画面いっぱいに広がっています。

テキストとともに、画面いっぱいに作られたオレンジが、offset 指定で表示位置を変更され、その後背景を青にしていることが、わかります。

わかったこと:position は、利用可能領域を埋める

Position は利用可能領域を埋めて表示しますし、offset は、表示位置を移動させますが、表示領域を拡張することはしません。

このあたりの差異が、使い分けるときのポイントな気がします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です