目次
- はじめに
- 解消方法
- 解説
- 最後に
はじめに
スクロールを含む画面を作る際に、
iOSでは問題がないのに、
Androidだけスクロール時のレイアウトが崩れてしまう時があります。
↓Androidだけ、スクロール時に一覧部分が「クーポン一覧」のヘッダーに被っている
| iOS | Android |
|---|---|
 |
 |
今回は、この不具合を解消する方法をご紹介します！
解消方法
今回のプロジェクトは、
上からヘッダー、メイン、フッターの順番で以下のような構造になっています。
スクロールの不具合を解消するためには、
真ん中のFlexContainer（今回はflxMain）の設定を変更してあげるだけで解消できます。
真ん中の要素をクリックして選択状態にしたら、
右メニューのFlexContainerタブを確認して下さい。
一番上の「Clip Bounds」の設定がデフォルトでOFFになっていると思うので、
ONに変更してください。
以上で完了です！
早速、動作チェックをしてみましょう。
スクロールをしても、ヘッダーに被ることなく
正常に表示されるようになりましたね！
解説
今回の不具合の原因を簡単に説明します
FlexContainerの「Clip Bounds」プロパティは、
子ウィジェットが境界から出たときにはみ出た部分を
クリップ（切り取り）するかどうかを指定します。
今回の場合、
FlexContainer（親）の中に入っているセグメントWidget（子）が
スクロールする（境界から出る）時にクリップするのをOFFにしていたため、
セグメントに表示する部分がヘッダー部分に被さってしまうような動作になっていました。
親WidgetのClip Boundsを有効にすることで、
はみ出た部分をクリップし正常に表示することができるようになりました！
Clip Boundsで解決できる問題については、
こちらでも説明をしていますので併せて確認してみてくださいね
最後に
FlexContainerを使っていて何故か不具合が起きる。。
という時は、Clip Boundsが起因しているかもしれません。
今回の記事を呼んで、
同様の事象に遭遇したら是非試してみてくださいね！
参考