Использование виджета 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 гарантируют, что обе колонки занимают одинаковое пространство по горизонтали.

Этот макет гарантирует, что обе колонки будут соответствовать высоте самой высокой колонки.