[SwiftUI] modifier の順番は本当に大事

Modifier の順番の大切さに気付いたのでメモ

気づき

ここでつくった、ドラッグできるフレームに対して、マウスの位置に合わせてカーソルを変更しようと思ったのがきっかけでした。

マウスの位置の変更に対する動作として、.onHover を使用することができます。

この .onHover を使って、入ったとき、出たときにカーソルを変えるようにしました。

onHover部分

MoveCursorInArea

良い感じです。

全体で見るとこんな感じでした。

コード

.onHover の位置は特に考えずに、なんとなく(汗)最後に追加していたんですが、問題が発生しました。

一度 Rectangle をドラッグで移動させた後に、マウスを Hover 位置に移動させても、期待と違う場所でマウスカーソルが変わるんです。

期待通りに変更されていないとき

期待通りに変化していないケース

期待してないのに変更されているとき

期待してないのに変更されるケース

問題分析

よ〜くみてみると、Rectangleを移動した後も、どうやら、Rectangleの初期位置に対して、マウスカーソルが制御・変更されているようだと気づきました。

で、コードを確認してみると、そうです、onHover が一番最後にあり、offsetで移動された後のRectangle(というかborder)に対して処理しているのでした。

解決策: onHover を適用する順番大事

問題点はわかったので、解決策は簡単です。onHover を offset の前に移動させて解決。

onHover位置を調整したコード
# ついでに、ドラッグ中のカーソルも調整してます。

期待通りのマウスカーソル

まとめ:位置に関係する modifier は、offset 等の modifier との適用順番に注意することが必要

Modifier の適用順序で background や fill で色が塗られる位置が変わることは知っていましたが、改めて再認識ました。

ということのメモでした。

コメントを残す

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