ios Hero动画上的RenderFlex溢出- Flutter

owfi6suc  于 2022-11-19  发布在  iOS
关注(0)|答案(2)|浏览(229)

嗨,伙计们!这是我的问题。我有两个屏幕:home-screen.dartall-categories.dart。当我从一个导航到用HeroAnimation动画CategoriesWidget()时。动画工作,但我在我的物理设备和iOS模拟器中都有这个错误。CategoriesWidget()在两个屏幕中是相同的,只是卡的数量发生了变化,但我认为这不是问题所在,因为如果我把同样数量的卡放进两个里面,问题还是会发生。
第一个

lb3vh1jj

lb3vh1jj1#

实际 情况 是 , 你 的 小 部件 对于 它们 的 父 部件 来说 太 大 了 。 渲染 引擎 为 flutter 工作 的 方式 是 , 父 部件 设置 子 部件 的 约束 , 而 子 部件 自己 设置 它们 的 大小 。 在 这种 情况 下 , 你 的 一 个 小 部件 的 高度 大于 父 部件 设置 的 约束 。
有 不同 的 方法 来 解决 这个 问题 :
1.您 可以 按照@RandomGuru 的 建议 , 减小 小 部件 的 大小 ( 或 增加 父 控件 的 约束 ) 。 这 将 涉及 将 SizedBox ( 高度 : 10 ) 增加 45 像素 或 将 文本 的 边 减少 45 像素 。
1.在 里面 使用 一 个 灵活 的 小 部件 。 你 可以 使用 Expanded 来 代替 sizedbox , 这样 它 就 可以 占用 可用 的 空间 ( 而 不是 你 直接 设置 它 )
1.使用 灵活 的 文本 。 我 喜欢 , 喜欢 , 喜欢 AutoSizeText 插件 的 这种 情况 。 https://pub.dev/packages/auto_size_text 它 改变 字体 大小 的 基础 上 , 父母 的 约束 , 并 帮助 您 避免 的 情况 下 , 文本 是 使 您 溢出 。 此外 , 有 一 个 AutoSizeGroup 设置 , 让 您 设置 的 文本 大小 的 基础 上 , 最 有限 的 情况 下 , 这样 你 就 不会 有 不同 的 文本 大小 在 不同 的 卡 。
1.使用 滚动 控件 。 将 溢出 的 内容 Package 在 一 个 可 滚动 的 控件 中 , 如 Listview 、 CustomScrollWidget 或 SingleChildScrollView 。 在 这种 情况 下 , 这 显然 是 不 合适 的 , 因为 在 可 滚动 的 列表 视图 中 滚动 卡片 上 的 信息 会 很 奇怪 ... ... 但是 , 当 溢出 时 , 这 总是 要 记住 的 。
我 非常 非常 推荐 阅读 这 篇 关于 布局 怪癖 的 文章 :https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 具体 来说 , 示例 24 和 下面 的 示例 将 介绍 如何 处理 大 文本 字符 串 。

gt0wga4j

gt0wga4j2#

我遇到了同样的问题,并能够通过分别用一个英雄和文本小部件的材料 Package 每个小部件来修复它。
示例:

class CategoriesWidget extends StatelessWidget {
  const CategoriesWidget(
  {Key? key,
  required this.icon,
  required this.suffix,
  required this.value,
  required this.trackId})
  : super(key: key);
final IconData icon;
final String suffix;
final String value;
final String trackId;

@override
Widget build(BuildContext context) {
 return Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: [
    Hero(
      tag: "icon_${trackId}_$suffix",
      child: Icon(
        icon,
        color: ResColors.primary,
      ),
    ),
    Row(
      children: [
        Hero(
            tag: "value_${trackId}_$suffix",
            child: Material(child: Text(value))),
        SizedBox(
          width: 5,
        ),
        Hero(
            tag: "suffix_${trackId}_$suffix",
            child: Material(child: Text(suffix)))
        ],
      )
    ],
   );
  }
 }

相关问题