Flutter中如何让SingleChildScrollView实现整屏滚动的引导页？

问题根源分析 #

你当前的结构存在两个核心问题：

• Expanded 会强制Row内的两个Container平分可用宽度，导致每个页面实际宽度不足一屏，滚动时自然无法完整切换到下一屏。
• SingleChildScrollView 默认是自由滚动模式，没有内置的整屏分页吸附逻辑，即便宽度设置正确，也无法自动停在整屏位置。

方案1：调整SingleChildScrollView结构实现整屏滚动 #

如果坚持使用SingleChildScrollView，按以下步骤修改代码：

1. 获取屏幕尺寸：通过MediaQuery.of(context).size拿到当前屏幕的宽高。
2. 设置ConstrainedBox总宽度：将minWidth设为屏幕宽度 × 页面数量，确保Row能横向展开所有页面。
3. 移除Expanded，给Container固定宽度：每个页面Container的width直接设为屏幕宽度，无需用Expanded分配空间。
4. 添加分页滚动物理效果：给SingleChildScrollView设置physics: PageScrollPhysics()，让滚动时自动吸附到整屏位置。

示例代码：

Scaffold(
  body: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    physics: PageScrollPhysics(), // 开启分页吸附
    child: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: MediaQuery.of(context).size.width * 2, // 2个页面，总宽度为2倍屏幕宽
        minHeight: MediaQuery.of(context).size.height,
      ),
      child: Row(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.blue,
            child: Center(child: Text('页面1')),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.orange,
            child: Center(child: Text('页面2')),
          ),
        ],
      ),
    ),
  ),
)

方案2：使用PageView（推荐） #

Flutter原生提供的PageView组件专门用于整屏分页滚动，比SingleChildScrollView更简洁，且原生支持分页逻辑、页面切换监听等功能，完全适配引导页场景：

示例代码：

Scaffold(
  body: PageView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(color: Colors.blue, child: Center(child: Text('页面1'))),
      Container(color: Colors.orange, child: Center(child: Text('页面2'))),
    ],
  ),
)

如果需要手动控制页面切换或监听页面变化，还可以搭配PageController使用，实现更复杂的交互逻辑。

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