Интерфейс Flutter: Абсолютно позиционированный элемент с фиксированной высотой и шириной 100% - PullRequest
Новая
       23

Интерфейс Flutter: Абсолютно позиционированный элемент с фиксированной высотой и шириной 100%

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

В флаттере я хотел бы иметь контейнер с фиксированной высотой и шириной 100%.

Для этого я использовал: 

              Row(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.blue,
                      height: 40.0,
                    ),
                  ),
                ],
              ),

Теперь я бы хотел сместить эту строку на несколько пикселей за пределами экрана. Для этого я пытаюсь использовать: 

        Stack(
          children: <Widget>[
            Positioned(
              left: -5.0,
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.blue,
                      height: 40.0,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

Это дает мне ошибку:

Следующее утверждение было выдано во время executeLayout (): у потомков RenderFlex ненулевое сгибание, но входящие ограничения ширины не ограничены.

Как бы я создал этот эффект макета?

1 Ответ

1 голос
/ 16 марта 2019

Попробуйте указать определенный размер дочерних виджетов.Позиционированный виджет не может иметь гибкий размер дочерних элементов.

Итак, я дал ширину экрана для Positioned (родительский виджет) и высоту 40. И вам просто нужно указать ширину каждого потомка в строке.Если вы хотите дать им гибкие отношения, попробуйте свойство MainAxisAlignment внутри виджета Row.

Вот мой пример. 

Positioned(
              width: MediaQuery.of(context).size.width,
              height: 40.0,
              left: -5.0,
              child: Container(
                color: Colors.grey,
                child: Row(
                  children: <Widget>[
                    Container(
                      color: Colors.green,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(
                          child: Text("Green")
                      ),
                    ),
                    Container(
                      color: Colors.pink,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(child: Text("Pink"))
                    ),
                    Container(
                      color: Colors.blue,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(child: Text("Blue")),
                    )
                  ],
                ),
              ),
            ),
...