Flutter TabBarView Дети не могут визуализировать - PullRequest
Новая
       64

Flutter TabBarView Дети не могут визуализировать

0 голосов
/ 27 сентября 2019

Я пытаюсь повторить следующее https://lh3.googleusercontent.com/pOGNNz2MYFZg24jd7Yf55mLXFRWIYMCNQSUshnPX6P2iYsMQn8bkezdp8tQD-Y9GcD0=w2560-h1370

Я не понимаю, почему дочерние виджеты в моем TabBarView вызывают исключение, есть упоминание о неограниченной высоте, но я предоставил высотуи ширину дочерних виджетов, так что я не понимаю, что происходит ...

К вашему сведению: виджет TripPage (не показан, отображается только состояние) передается в качестве значения атрибута body объектаЭшафот [также не показан], и я не хочу его менять.

Вот мой код: 

class _TripPageState extends State<TripPage> {
  //ToDo: Keep as dynamic until an object is created for the listItems.
  List<dynamic> upcomingTrips;
  List<dynamic> pastTrips;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
          Padding(
            child: Text(
              "Trips",
              style: TextStyle(
                  color: Colors.deepPurple,
                  fontSize: 36.0,
                  fontWeight: FontWeight.bold),
            ),
            padding: EdgeInsets.only(top: 40.0, left: 28.0),
          )
        ]),
        DefaultTabController(
          length: 2,
          child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
            Padding(
                padding: EdgeInsets.only(left: 16.0, top: 24.0),
                child: Row(children: <Widget>[
                  TabBar(
                    tabs: <Widget>[
                      Tab(text: "Upcoming".toUpperCase()),
                      Tab(text: "Past".toUpperCase())
                    ],
                    isScrollable: true,
                    indicatorColor: Colors.deepPurple,
                    labelColor: Colors.black,
                    unselectedLabelColor: Color.fromRGBO(78, 78, 81, 30),
                  )
                ])),
            TabBarView(
              children: <Widget>[
                Container(
                    color: Colors.pink,
                    child: Image.asset('assets/saved_flights_icon.jpg',
                        width: 200.0, height: 200.0)),
                Container(
                    color: Colors.greenAccent,
                    child: Image.asset('assets/saved_flights_icon.jpg',
                        width: 200.0, height: 200.0)),
//                UpcomingTripsTabPage(),
//                PastTripsTabPage()
              ],
            )
          ]),
        )
      ],
    );
  }
}

Однако на трассировке стека появляется следующее сообщение: I/flutter ( 7054): The following assertion was thrown during performResize(): I/flutter ( 7054): Horizontal viewport was given unbounded height. I/flutter ( 7054): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter ( 7054): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter ( 7054): vertical space in which to expand.

и несколько сообщений о RenderBoxes, RenderViewports и т. Д.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

Краткий ответ:

Чтобы использовать TabBarView, вы должны указать конечную высоту.Есть несколько способов сделать это.Один из них - это обернуть его в виджет с ограниченной высотой (например, Container или SizedBox).В качестве альтернативы, если родительский элемент виджета имеет ограниченные размеры (в вашем случае это не так), вы можете обернуть TabBarView в виджет Expanded, который будет указывать его на расширение для заполнения доступного пространства.

В вашем случае что-то вроде следующего должно решить проблему: 

Container( // or SizedBox, etc.
  height: 200
  child: TabBarView(...)
)

Фон:

Вы используете TabBarView представление, которое не имеет ограничений по высоте,Другими словами, его высота не ограничена, как предполагает ошибка:

Горизонтальный видовой экран получил неограниченную высоту.

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

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

Ось, максимальное ограничение которой бесконечно, равно неограниченно .

СледовательноМы можем видеть, что в некоторых случаях виджетам дается бесконечная максимальная высота (вертикальное пространство) для использования для расширения.Если виджет попытается заполнить все доступное (бесконечное) пространство, это окажется проблематичным.Поэтому Флаттер выдает ошибку.Это можно исправить, ограничив виджет, обернув его в родительский элемент с ограниченной шириной / высотой.

Довольно поучительное (хотя и несколько короткое) объяснение того, что происходит, можно найти в документации :

В определенных ситуациях ограничение, заданное для блока, является неограниченным или бесконечным.Это означает, что для максимальной ширины или максимальной высоты задано значение double.INFINITY.

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

Если вам интересно, вы можете увидеть, где возникла ошибка здесь .

0 голосов
/ 27 сентября 2019

Я думаю, вам нужно обернуть TabBarView в контейнер и указать для него высоту. 

              Container(
                height: 200.0,
                child: TabBarView(
                  children: <Widget>[
                    Container(
                        color: Colors.pink,
                        child: Image.asset('assets/saved_flights_icon.jpg',
                            width: 200.0, height: 200.0)),
                    Container(
                        color: Colors.greenAccent,
                        child: Image.asset('assets/saved_flights_icon.jpg',
                            width: 200.0, height: 200.0)),
//                UpcomingTripsTabPage(),
//                PastTripsTabPage()
                  ],
                ),
              )
...