Flutter PageView点击浮动按钮新增同尺寸容器高度异常求助

核心问题排查 #

• 参数计算基准错误是高度异常的直接原因
  首个正常展示的录入卡片，底部内边距使用屏幕高度的1.5%作为计算值，数值很小。而新增卡片的底部内边距，错误将计算基准替换为屏幕宽度的15%，数值比正确值大了数倍，在卡片内部留出了大量无效空白，直接压缩了卡片实际可用高度，视觉上就会显得比首个容器矮很多。
• 冗余嵌套引入约束偏差
  PageView的每个item默认会被自动约束为与视口完全一致的尺寸，也就是外层容器设定的0.92倍屏宽、0.37倍屏高。新增分支额外套了一层写死相同宽高的Container是完全多余的，这种嵌套不仅没有意义，还可能因为约束传递的细微差异，进一步拉大两个卡片的尺寸偏差。
• 重复分支逻辑是bug产生的根源
  两个分支的内部布局（输入框、按钮、列排布）100%重复，只是因为内边距参数抄录错误导致了差异。独立的分支判断既没有复用价值，也非常容易出现参数漏写、错写的问题。
• 附带代码缺陷
  NotificationListener的onNotification回调没有返回值，会触发Flutter框架的编译警告，只要在回调里标记通知已消费即可正常工作。

优化修复方案 #

1. 抽离通用的录入卡片组件，彻底消除分支判断，所有位置复用同一套布局参数，从根源上避免尺寸不一致。
2. 修正内边距参数，将新增分支里错误的MediaQuery.of(context).size.width * 0.15替换为与首个容器一致的MediaQuery.of(context).size.height * 0.015。
3. 删掉新增分支里多余的固定宽高Container，让所有PageView item直接返回通用卡片组件，保证所有item收到的布局约束完全统一。
4. 补全NotificationListener回调的返回值，消除编译警告。

参考简化代码结构 #

// 抽离通用租户信息录入卡片，所有位置复用同一套逻辑
Widget _buildTenantInputCard(int index) {
  return Padding(
    padding: EdgeInsets.only(
      left: MediaQuery.of(context).size.height * 0.015,
      top: MediaQuery.of(context).size.width * 0.08,
      bottom: MediaQuery.of(context).size.height * 0.015,
    ),
    child: Material(
      borderRadius: BorderRadius.circular(50.0),
      color: Colors.white,
      elevation: 4.0,
      child: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 保留原有的姓名输入框、手机号输入框、证件上传按钮逻辑
          ],
        ),
      ),
    ),
  );
}

// 修正后的滚动监听逻辑
NotificationListener<OverscrollIndicatorNotification>(
  onNotification: (overscroll) {
    overscroll.disallowGlow();
    return true; // 标记通知已消费，消除缺失返回值的警告
  },
  child: PageView.builder(
    reverse: false,
    pageSnapping: false,
    controller: PageController(viewportFraction: 1),
    itemCount: count,
    // 直接返回通用卡片，无需分支判断，保证所有尺寸完全统一
    itemBuilder: (context, index) => _buildTenantInputCard(index),
  ),
)

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