Блог

Здравствуйте, у меня есть приведенный ниже код

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body:
       Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            children: [
             // FlexibleWidget(),
              ExpandedWidget(),
              FlexibleWidget(),
            ],
          ),
          Row(
            children: [
              ExpandedWidget(),
              ExpandedWidget(),
            ],
          ),
          Row(mainAxisSize: MainAxisSize.min,
            children: [
              FlexibleWidget(),
              FlexibleWidget(),
            ],
          ),
          Row(mainAxisSize: MainAxisSize.min,
            children: [
              FlexibleWidget(),
              ExpandedWidget(),
            ],
          ),
        ],
     ),
    );
  }
}

class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Expanded',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

class FlexibleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Flexible',
            style: TextStyle(color: Colors.black, fontSize: 24),
          ),
        ),
      ),
    );
  }
}
 

И результат таков:

Разве первый контейнер не заполняет пространство, оставшееся после установки гибкого виджета? Поскольку он также принадлежит столбцу с дочерним элементом из 2 развернутых виджетов, размер ширины столбца должен составлять весь экран. Это означает, что строка тоже должна занимать весь экран. Я бы ожидал, что расширенный зеленый виджет в первой строке заполнит строку до тех пор, пока не останется белого, как на изображении ниже:

Вместо этого он заполняет только половину страницы. Кто-нибудь может объяснить это поведение?

Позвольте мне начать с FlexFit, прежде чем перейти к сути. FlexFit.tight позволяет дочерним элементам заполнять остальное пространство, но FlexFit.loose позволяет дочерним элементам изменять свои размеры по своему усмотрению.

Теперь, как вы, возможно, знаете Expanded , это не что иное, как гибкий с плотно прилегающим т.е. fit: FlexFit.tight .

 Expanded(
  child: child,
)

is equivalent to

Flexible(
  fit: FlexFit.tight,
  child: child,
)
 

Теперь давайте рассмотрим ваш пример.

Для первого блока есть два виджета с Flex 1 (по умолчанию), которые разделят экран на две половины; каждому будет предоставлено 50%. Это не означает, что они должны занимать 50% экрана. Это означает, что они могут расширяться до 50% экрана. Итак, Expanded виджет делает это. Он занимает 50% экрана, поскольку он плотно прилегает.

Переходя к Flexible виджету, по умолчанию он следует за свободным. Итак, он говорит своим дочерним элементам, что они могут расширяться до 50%, но нет никаких ограничений на то, что они должны занимать все пространство. Они могут занимать любое пространство, которое они хотят, но верхняя граница установлена на 50%. В вашем случае требуется только пространство для размещения «гибкого» текста с некоторым заполнением. Так что это нужно.