Flutter桌面应用添加HeroBanner后无法响应鼠标点击求助

错误根源分析 #

从报错信息来看，核心问题是渲染过程中尺寸断言失败，导致RenderFittedBox未完成布局，进而触发鼠标追踪器异常（!_debugDuringDeviceUpdate断言失败），最终让应用无法响应鼠标事件。具体诱因包括：

1. 使用MediaQuery.of(context).size.width设置SizedBox宽度，在LayoutBuilder的布局阶段，该值可能尚未正确计算，导致宽度为0，触发width > 0.0断言失败。
2. Stack的父容器约束传递异常，使得FittedBox无法获取有效布局尺寸，引发RenderBox was not laid out错误。
3. 类成员变量与构造函数参数的默认值存在冲突（成员变量maxHeight初始为400，但构造函数默认值是100），可能导致高度约束不符合预期。

修复步骤 #

1. 替换MediaQuery宽度为LayoutBuilder约束宽度

在LayoutBuilder内部，直接使用constraints.maxWidth作为容器宽度，确保布局时能获取当前可用的最大宽度，避免尺寸为0的情况。

2. 修复成员变量初始化逻辑

将成员变量改为final并通过构造函数初始化，消除默认值冲突，保证参数传递的一致性。

3. 优化Image布局约束

用SizedBox.expand替代固定宽度的SizedBox，让容器自动填充父组件空间，同时为Image添加fit: BoxFit.cover，增强布局稳定性。

修复后的完整代码 #

class HeroBanner extends StatelessWidget {
  final String? image;
  final String title;
  final double maxHeight;

  HeroBanner({Key? key, this.image, this.title = "", this.maxHeight = 100})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return image != null
        ? LayoutBuilder(builder: (context, constraints) {
            return ClipRect(
              clipBehavior: Clip.hardEdge,
              child: SizedBox(
                height: maxHeight,
                width: constraints.maxWidth,
                child: Stack(
                  children: [
                    SizedBox.expand(
                      child: FittedBox(
                        fit: BoxFit.cover,
                        child: Image.asset(
                          image!,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    const FadeToBlackFilter(),
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: Padding(
                        padding: comfortable,
                        child: Text(
                          title,
                          overflow: TextOverflow.ellipsis,
                          style: pageTitle(context).copyWith(color: Colors.white),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          })
        : PageTitle(title);
  }
}

额外建议 #

• 确保comfortable是已正确定义的EdgeInsets常量（如const EdgeInsets.all(16)），避免布局时出现异常。
• 若问题仍存在，可尝试将SizedBox替换为ConstrainedBox，明确指定宽高约束：

  ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: maxHeight,
      minWidth: constraints.maxWidth,
    ),
    child: Stack(...),
  )
  

内容的提问来源于stack exchange，提问作者Kdwk