android - 英雄动画上的 RenderFlex 溢出 - Flutter

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

发生的事情是您的小部件对他们的 parent 来说太大了。渲染引擎为 Flutter 工作的方式是 parent 设置子部件的约束，子部件自己设置它们的大小。在这种情况下，您的一个小部件的高度大于父级设置的约束。

有不同的方法来解决这个问题:

您可以执行@RandomGuru 建议的操作并减小小部件的大小(或增加父级的约束)这将涉及将 SizedBox(height:10) 增加 45 像素或将文本的边减少 45 像素。

在里面使用一个灵活的小部件。您可以使用 Expanded 而不是使用 sizedbox，以便它占用可用空间(而不是直接设置它)

使用灵活的文本。我喜欢，喜欢，喜欢这种情况下的 AutoSizeText 插件。 https://pub.dev/packages/auto_size_text它会根据 parent 的限制更改字体大小，并帮助您避免文本溢出的情况。此外，还有一个 AutoSizeGroup 设置，可让您根据最有限的情况设置文本大小，这样您就不会在不同的卡片中设置不同的文本大小。

使用滚动小部件。将溢出的内容包装在 Listview、CustomScrollWidget 或 SingleChildScrollView 等可滚动小部件中。在这种情况下，这显然是不合适的，因为在可滚动的 ListView 内滚动卡片上的信息会很奇怪......但是，当您溢出时始终要牢记这一点。

我非常非常非常推荐阅读这篇关于布局怪癖的中等文章: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2
具体来说，示例 24 和以下示例继续处理大型文本字符串。