FlexBoxっぽいFlutterですが、Flexのレイアウトなどの実装は何が使われているのでしょうか？
Chromeはblinkで、React nativeはYogaです。
https://flutter.dev/docs/resources/rendering
ここにあるようにFlutterでは、RenderObjectがレイアウトと描画の基本クラスのようです。
FlutterのFlexの内部をみるとcreateRenderObjectでreturnしているのはRenderFlexです。
RenderFlexにperformLayoutがあって、ここでレイアウトを決めています。
他の種類のRenderXXXでも、performLayout内部でレイアウトが決められています。
ここからもわかるようにFlutterではレイアウトの仕組みも１からDartで実装しているようです。
そうしないとWebで実行とか出来ないわけですから、当たり前といえば当たり前かも知れません。
正直、これを読んだところで何が分かるというわけでも無いかなと思います。
全体的に眺めていて、目に止まったのはbaselineの計算部分でした。
例えば、RenderFlexの中にgetDistanceToBaselineという関数呼び出しがあります。alignmentをbaselineに設定した時に位置の計算に利用されます。
Reactだと以下のように出来ます。
https://snack.expo.io/BJfcbjDsH
gの下の部分が画像やViewよりも下に来ているのが分かると思います。
このように文字と他の要素をbaselineで揃えたいという要望は普通にあると思います。
これ、Flutterでどうやるのか？
rowに素直に並べてalignにbaselineを設定すると以下のようになります。
全然違いますね。
Flutter自体にはBaselineクラスというのがあるので、すべての要素を囲ってbaselineを0にすればそれっぽくはなります。
baselineの値を0ってなんでしょうね。baseline関連はdocumentもすごい充実しているわけではなかったです。
baseline関連はまだ発展途上なのかもななどとも感じます。
0 件のコメント:
コメントを投稿