IntrinsicHeight、IntrinsicWidthとは
IntrinsicHeight、IntrinsicWidthを使う際、下記の4つのメソッドが呼び出されて、UIを描画している。IntrinsicHeightの応用の場面としては、子たちの高さやサイズを揃えたい時です。
@override
double computeMinIntrinsicWidth(double height) {
if (child != null)
return child!.getMinIntrinsicWidth(height);
return 0.0;
}
@override
double computeMaxIntrinsicWidth(double height) {
if (child != null)
return child!.getMaxIntrinsicWidth(height);
return 0.0;
}
@override
double computeMinIntrinsicHeight(double width) {
if (child != null)
return child!.getMinIntrinsicHeight(width);
return 0.0;
}
@override
double computeMaxIntrinsicHeight(double width) {
if (child != null)
return child!.getMaxIntrinsicHeight(width);
return 0.0;
}
constraints制約について
RenderIntrinsicWidthクラスに下記の記述があります。要するに、constraintsの制約が厳しめの場合、IntrinsicHeight、IntrinsicWidthが機能しません。うまくいかない時は焦らず、ソースコードをチェックしましょう。とはいえ、親からの制約あるということはサイズ決められていることです。IntrinsicHeight を使う意味がなくなっています、現実的は存在しないと思います。
※constraintsの制約突破について、前の記事をご参考ください。
if (!constraints.hasTightWidth) {
final double width = child!.getMaxIntrinsicWidth(constraints.maxHeight);
assert(width.isFinite);
constraints = constraints.tighten(width: _applyStep(width, _stepWidth));
}
if (_stepHeight != null) {
final double height = child!.getMaxIntrinsicHeight(constraints.maxWidth);
assert(height.isFinite);
constraints = constraints.tighten(height: _applyStep(height, _stepHeight));
}
return layoutChild(child!, constraints);
使い方
return Scaffold(
appBar: AppBar(
title: const Text('Demo'),
),
body: Align(
alignment: Alignment.topRight,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 40,
height: 120,
color: Colors.red,
),
Container(
width: 40,
height: 80,
color: Colors.blue,
),
Container(
width: 40,
color: Colors.green,
),
],
),
),
),
);
IntrinsicHeightありとなしの効果比較
あり | なし |
---|---|
![]() |
![]() |
上記の例で、IntrinsicHeightは、高さ未定の子たちはお互いの高さを合わせて、描画していることはわかる。