課題・背景
HTML (Javascript) から FlutterなどのGUI作成に入門した際に、Block要素、inline要素のような概念でウィジェットのサイズ決定を考えてしまい、うまくアイテムを配置できなかった。
ウィジェット配置の考え方
Flutter / Kotlin (android GUI) では、 親が子に「どれくらいの大きさなら許容するか」という制約を渡し、子がその範囲で自分のサイズを決めて返す 。つまり、子どもは親の指定するサイズを超えることはできない。
1. 親の制約
制約は、以下の4つの値として渡される。
（この部分を誤解していた。親は子どもの最大サイズを規定するが、同時に 最小サイズも規定する 。つまり、子どもは小さければいいということではない。）
親から子どもに伝える:
- あなたの最小の大きさは (min_x, min_y) です。
- あなたの最大の大きさは (max_x, max_y) です。
- 最小サイズ === 最大サイズであるとき、制約がタイト (tight) であるという。この場合、子どもはサイズを決定されている
- 最小サイズが
0 × 0であるとき、制約がルーズ (loose) であるという
2. 子どもの決定
子どもは上記制約の中で、自身のサイズを決定して返却する。
基本的に親の希望が優先されるため、無理に圧縮されたり引き伸ばされることがある。このときは先祖ウィジェットの設定が悪い。
具体例
なにか作って書こうとしましたが、以下のサイトにわかりやすい例があったので、実際の感じはこちらで確認ください...