Использование виджета IntrinsicHeight с Column в Flutter

IntrinsicHeight
виджет в Flutter используется для того, чтобы его дочерние виджеты соответствовали высоте самого высокого виджета в заданном направлении, обычно вертикально. При использовании его с Column
, это может помочь гарантировать, что все дети в колонке занимают одинаковую высоту, что полезно в макетах, где вам нужна единообразная высота для всех элементов.
Простой пример использования IntrinsicHeight
с Column
:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('IntrinsicHeight Пример')),
body: Center(
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
children: [
Container(
color: Colors.red,
child: Text('Короткий'),
padding: EdgeInsets.all(10),
),
Container(
color: Colors.green,
child: Text('Немного длиннее текст'),
padding: EdgeInsets.all(10),
),
],
),
),
Expanded(
child: Column(
children: [
Container(
color: Colors.blue,
child: Text('Очень длинный текст, который занимает больше места'),
padding: EdgeInsets.all(10),
),
Container(
color: Colors.yellow,
child: Text('Еще один короткий текст'),
padding: EdgeInsets.all(10),
),
],
),
),
],
),
),
),
),
);
}
}
Объяснение:
- Виджет
IntrinsicHeight
делает так, что обе колонки имеют одинаковую высоту, что обеспечивает единообразие, даже если содержимое колонок имеет разную высоту. - Виджет
Row
обеспечивает размещение двух колонок рядом, аcrossAxisAlignment: CrossAxisAlignment.stretch
гарантирует, что колонки растягиваются, чтобы занять доступную высоту. - Виджеты
Expanded
гарантируют, что обе колонки занимают одинаковое пространство по горизонтали.
Этот макет гарантирует, что обе колонки будут соответствовать высоте самой высокой колонки.