RenderFlex переполнен на анимации героя - флаттер - PullRequest
Новая
       83

RenderFlex переполнен на анимации героя - флаттер

1 голос
/ 04 мая 2020

enter image description here

Привет, ребята! Это мой вопрос. У меня есть два экрана: home-screen.dart и all-categories.dart. Когда я перемещаюсь от одного, чтобы оживить CategoriesWidget() с HeroAnimation. Анимация работает, но у меня возникает эта ошибка как на физическом устройстве, так и в эмуляторе iOS. CategoriesWidget() одинаково на обоих экранах, меняется только количество карточек, но я думаю, что это не проблема, потому что, если я вставлю одинаковое количество карточек в обе, проблема все равно происходит. 

HomeScreen

body: ListView(
        padding: EdgeInsets.only(left: 20.0, top: 50.0, right: 20.0),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // navBar
              randomPhrase(),
              searchBarHome(),
            ],
          ),
          Hero(
            tag: 'categories',
              child: CategoriesWidget(5, true)),
        ],
      ),

AllCategories Screen

body: ListView(
        padding: EdgeInsets.only(left: 20.0, top: 50.0, right: 20.0),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 10.0),
              Text(
                'Explora nuestras categorias',
                style: kSubheadingextStyle.copyWith(
                  fontSize: 22.0,
                  height: 1.5,
                ),
              ),
              Hero(
                  tag: 'categories',
                  child: CategoriesWidget(categoriesData.length, false)),
            ],
          ),
        ],
      ),

The Error in the Console
════════ (39) Exception caught by rendering library ════════════════════════════════════════════════
A RenderFlex overflowed by 45 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///Users/joansubiratsllaveria/AndroidStudioProjects/giramos_app/giramos/lib/components/categories.dart:35:20
════════════════════════════════════════════════════════════════════════════════════════════════════

1 Ответ

0 голосов
/ 04 мая 2020

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

Существуют различные способы решения этой проблемы:

  1. Вы можете делайте то, что предлагает @RandomGuru, и уменьшайте размер виджета (или увеличивайте ограничения родительского элемента). Это может включать увеличение SizedBox (высота: 10) на 45 пикселей или уменьшение стороны текста на 45 пикселей.

  2. Используйте гибкий виджет внутри. Вместо использования sizebox, вы могли бы вместо этого использовать Expanded, чтобы он занимал доступное пространство (вместо того, чтобы устанавливать его напрямую)

  3. Использовать гибкий текст. Я люблю, люблю, люблю плагин AutoSizeText для подобных случаев. https://pub.dev/packages/auto_size_text Он изменяет размер шрифта в зависимости от ограничений родителей и помогает избежать ситуаций, когда текст приводит к переполнению. Кроме того, есть настройка AutoSizeGroup, которая позволяет вам устанавливать размер текста в зависимости от наиболее ограниченного случая, чтобы у вас не было разного размера текста на разных карточках.

  4. Использование виджет прокрутки. Оберните содержимое, которое переполняется в прокручиваемом виджете, таком как Listview, CustomScrollWidget или SingleChildScrollView. В этом случае, очевидно, это неуместно, поскольку было бы странно прокручивать информацию на карте, когда она находится внутри прокручиваемого списка ... однако всегда следует иметь в виду, что при переполнении.

Я очень, очень рекомендую прочитать эту среднюю статью о причудах макета: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 В частности, пример 24 и следующие go касаются работы с большими текстовыми строками.

...