Поведение макета контейнера Flutter

когда я читаю поведение разметки контейнера Контейнерный документ:

If the widget has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible.

поэтому я пишу код, как показано ниже, я думаю, что второй контейнер должен быть как можно меньше, но он заполняет область содержимого приложения (весь экран) , почему?

class ContainerWithScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: 'Container with scaffold',
  home: Scaffold(
    body: Container(
      color: Colors.blue,
      height: double.infinity,// provides unbounded height constraints for the child container
      width: double.infinity,// provides unbounded width constraints for the child container
      child: new Container(
        color: Colors.white,
      ),
    ),
  ),
);
}
}

Если один из ответов решает вашу проблему, не забудьте принять его как решение. stackoverflow.com/help/someone-answers. Спасибо! И, как я уже сказал, я думаю, что diegoveloper заслужили трофей.

Soundbytes 29.10.2018 12:03
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
1
1 221
3

Ответы 3

Вы устанавливаете высоту и ширину, попробуйте использовать UnconstrainedBox

      Container(
                color: Colors.blue,
                height: double
                    .infinity, // provides unbounded height constraints for the child container
                width: double
                    .infinity, // provides unbounded width constraints for the child container
                child: UnconstrainedBox(
                  child: new Container(
                    color: Colors.red,
                  ),
                ),
              ),

Подробнее: https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html

Могу я попросить вас взглянуть на вопрос, связанный с флаттером, здесь: stackoverflow.com/questions/60539378/…?

Istiaque Ahmed 05.03.2020 08:21

Чтобы показать, что здесь происходит, я расширил ваш пример кода вспомогательной функцией, которая повторяет ограничения окна виджетов контейнера:

class ContainerWithScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Container with scaffold',
      home: Scaffold(
        body: printConstraints(
          remark: 'outer',
          context: context,
          child: Container(
            color: Colors.blue,
            height: double.infinity, 
            width: double.infinity, 
            child: printConstraints(
              remark: 'inner',
              context: context,
              child: Container(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Widget printConstraints({String remark, Widget child, BuildContext context,}) {
  return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    print('$remark - $constraints');
    return child;
  });
}

при запуске приложения я получаю:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(w=961.5, h=552.9)

Если аргументы высоты и ширины удалены из внешнего контейнера, результат будет следующим:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)

Очевидно, вы не сняли ограничения. Вместо этого они устанавливаются на максимальные значения, которые противоположны предполагаемому результату.

Наконец, я обернул внутренний контейнер в UnconstrainedBox и, наконец, получил желаемый результат:

I/flutter (13029): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (13029): inner - BoxConstraints(unconstrained)

Экран теперь заполнен внешним синим Контейнером. (Обратите внимание: этот ответ предназначен только для предоставления дополнительной информации. Ответ diegoveloper уже является правильным решением вопроса.)

спасибо за ответ, вы предоставили мне полезную информацию!

lgw150 26.10.2018 14:16

Вы применяете неправильное правило

If the widget has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible.

Это правило не применяется, поскольку скаффолд обеспечивает ограничение для внешнего контейнера, и, устанавливая ширину и высоту на бесконечность во внешнем контейнере, вы устанавливаете ограничение для внутреннего контейнера, чтобы оно было таким же, как и набор ограничений скаффолда для внешнего контейнера. существует родительское ограничение, поэтому должно быть правильное правило для рендеринга размера внутреннего контейнера.

If the widget has no child, no height, no width, no constraints, and no alignment, but the parent provides bounded constraints, then Container expands to fit the constraints provided by the parent.

Таким образом, внутренний контейнер будет расширяться, чтобы соответствовать своему родительскому элементу.

Другие вопросы по теме