嗨,大家好!这是我的问题。我有两个屏幕: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
════════════════════════════════════════════════════════════════════════════════════════════════════
最佳答案
发生的事情是您的小部件对他们的 parent 来说太大了。渲染引擎为 Flutter 工作的方式是 parent 设置子部件的约束,子部件自己设置它们的大小。在这种情况下,您的一个小部件的高度大于父级设置的约束。
有不同的方法来解决这个问题:
我非常非常非常推荐阅读这篇关于布局怪癖的中等文章:https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2
具体来说,示例 24 和以下示例继续处理大型文本字符串。
关于android - 英雄动画上的 RenderFlex 溢出 - Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61581772/