Поведение макета контейнера 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
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.

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

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