Флаттер - Как получить контейнер с детьми, чтобы занять весь экран - PullRequest
Новая
       45

Флаттер - Как получить контейнер с детьми, чтобы занять весь экран

0 голосов
/ 04 марта 2019

Согласно документам Flutter Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. Ближе всего я к тому, чтобы заставить его работать: 

return Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      //width: Device.screenWidth,
      //height: Device.screenHeight,
      child: Column(
        children: <Widget>[(view[1])],
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width * .50,
      height: MediaQuery.of(context).size.width * .50,
      child: Column(
        children: <Widget>[(view[0])],
      ),
    ),
  ],
);


I/flutter (12292): The following message was thrown during layout:
I/flutter (12292): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter (12292): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (12292): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (12292): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Не могу понять, почему MediaQuery или Device не предотвращают переполнение?Первый контейнер всегда переполняется на 81 пиксель как на телефоне, так и на планшете с Android;нет iPhone или iPad для тестирования сейчас.На основании того, что я прочитал из других постов, переполнение желтым и черным корректируется просто путем оборачивания в SingleChildScrollView, но когда я пытаюсь это сделать, я получаю 

child: SingleChildScrollView(
        child: Column(
          children: <Widget>[(view[1])],
        ),
      ),

I/flutter (12292): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (12292): The following assertion was thrown during performLayout():
I/flutter (12292): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (12292): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (12292): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (12292): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (12292): space in the vertical direction.
I/flutter (12292): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
.
.
.
I/flutter (12292):   crossAxisAlignment: center
I/flutter (12292):   verticalDirection: down
I/flutter (12292): This RenderObject had the following child:
I/flutter (12292):   RenderAndroidView#e356e NEEDS-LAYOUT NEEDS-PAINT

Сделал несколько других попыток с помощью Expanded, ClipRect &другие виджеты, основанные на ошибках, которые я видел, но это только ухудшало ситуацию, когда изображения не было вообще.Я упускаю что-то простое или я должен попытаться исправить это по-другому?

РЕДАКТИРОВАТЬ: Согласно Amsakanna последняя попытка ниже, но все еще переполняется на 81 пиксель для создания идентичного сообщения об ошибке выше в первом блоке кода. 

return Stack(
  children: <Widget>[
    SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[view[1])],
        ),
      ),
    ),

I/flutter ( 1144): The following message was thrown during layout:
I/flutter ( 1144): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter ( 1144): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 1144): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 1144): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Попытка использовать IntrinsicHeight внутри SingleChildScrollView, как найдено здесь в Расширение содержимого до размера области просмотра , но оно также переполняется (на 81 пиксель) с похожей ошибкойсообщение.

Ответы [ 2 ]

0 голосов
/ 09 июня 2019

SizedBox.expand сделал это для меня.Вот пример отображения изображения так, чтобы высота изображения соответствовала родительскому, и контейнер рисовал черный фон в неиспользуемом пространстве: 

  SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Image (
        fit: BoxFit.fitHeight,
        image: AssetImage('assets/myimage.png'),
      ),
    ),
  );
0 голосов
/ 05 марта 2019

Вы сделали это правильно, обернув его внутри SingleChildScrollView.

Вторая ошибка возникает всякий раз, когда у вас есть гибкий виджет, такой как 'Expanded', помещенный в столбец.Если вы не поместили какой-либо развернутый виджет внутри первого столбца, возможно, это делает виджет «Камера».

Попробуйте задать определенный размер для вашего виджета «Камера», поместив его в контейнер или контейнер SizedBox * 1006.*.

...