Question

大家好！这是我的问题。我有两个屏幕：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
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

正在发生的事情是您的小部件对他们的父母来说太大了。渲染引擎处理抖动的方式是，父级设置子控件的约束，子级自己设置其尺寸。在这种情况下，您的一个小部件的高度大于父级设置的约束。

有多种解决方法：

您可以执行@RandomGuru建议的操作并减小小部件的大小（或增加父级的约束），这可能需要将SizedBox（height：10）增加45个像素或减少文本的边45像素。
在内部使用灵活的小部件。代替使用sizebox，您可以改用Expanded，以便它占用可用空间（而不是直接设置）
使用灵活的文本。我喜欢，喜欢，喜欢AutoSizeText插件。 https://pub.dev/packages/auto_size_text它会根据父级的约束来更改字体大小，并帮助您避免出现导致文本溢出的情况。另外，还有一个AutoSizeGroup设置，该设置使您可以基于最有限的情况来设置文本大小，以便在不同的卡片中没有不同的文本大小。
使用滚动小部件。将可滚动小部件（如Listview，CustomScrollWidget或SingleChildScrollView）中溢出的内容包装起来。在这种情况下，这显然是不合适的，因为在可滚动列表视图中滚动卡上的信息会很奇怪。但是，溢出时始终要牢记这一点。

我非常强烈建议阅读这篇有关版面设计古怪的文章：https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 具体来说，示例24及以下示例将讨论大文本字符串。

RenderFlex在英雄动画-颤抖

1 个答案: