Flutter中SingleChildScrollView的Container异常显示且滚动时出现在底部按钮下方

问题根因 #

• 布局结构未适配底部按钮高度：滚动视图默认占满父容器高度，底部按钮叠放在页面上层时，滚动内容底部没有预留对应高度的留白，会滑动到按钮覆盖区域
• 组件绘制层级不一致：ListTile的tileColor和外层Container的装饰不属于同一绘制层级，被上层按钮覆盖时会出现背景可见、文字被遮挡的异常表现
• 现有addPadding方法未传入child参数，不会对任何组件生效，属于无效代码

修复方案 #

1. 优先调整Scaffold布局结构（最稳妥方案） #

直接将底部按钮放入Scaffold的bottomNavigationBar参数中，Scaffold会自动计算body区域高度，滚动视图内容天然不会和底部按钮重叠：

Scaffold(
  // body区域自动避开底部按钮高度
  body: SingleChildScrollView(
    child: Column(
      children: [
        // 你的滚动内容，比如调用createNotes()
      ],
    ),
  ),
  // 底部按钮放在这里
  bottomNavigationBar: Container(
    height: 60, // 替换为你的按钮实际高度
    width: double.infinity,
    child: ElevatedButton(
      onPressed: () {},
      child: Text("底部按钮"),
    ),
  ),
)

2. 临时适配：给滚动视图加底部内边距 #

如果不能调整布局结构，直接给SingleChildScrollView设置底部padding，值等于底部按钮的高度，保证滚动到底部时内容刚好在按钮上方：

SingleChildScrollView(
  // 底部padding值替换为你的按钮实际高度
  padding: EdgeInsets.only(bottom: 60),
  child: Column(
    children: [
      // 滚动内容
    ],
  ),
)

3. 修复文字被遮挡、背景可见的异常 #

将ListTile的tileColor属性移到外层Container的color属性，统一绘制层级，修改后的createNotes方法如下：

createNotes() {
  return Container(
    decoration: borderBoxDecoration(),
    color: Colors.yellow, // 原ListTile的tileColor移到此处
    child: ListTile(
      title: Text(
        "Events",
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w600,
        ),
      ),
      subtitle: Text("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
        maxLines: 5,
        overflow: TextOverflow.ellipsis,
      ),
      onTap: () => func(),
    ),
  );
}

4. 修复无效的addPadding方法 #

Padding组件必须传入child参数才会生效，修改后：

addPadding(Widget child) {
  return  Padding(
    padding: EdgeInsets.all(4),
    child: child,
  );
}
// 调用方式：addPadding(createNotes())

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