Flutter 横向PageView如何实现子组件宽度大于屏幕宽度

通过PageController的viewportFraction属性配合子组件自定义宽度即可实现需求，具体实现步骤如下：

• 初始化PageController时设置viewportFraction参数，该参数代表单个页面默认占屏幕可视区域的宽度比例，设置为小于1的值即可让单页宽度小于屏幕，露出相邻页面内容，也为超宽子组件预留显示空间
• 将PageView的padEnds参数设为false，关闭框架默认给首尾页面添加的额外边距
• 给需要超过屏幕宽度的子组件单独指定大于屏幕宽度的尺寸即可

完整示例代码如下：

// 初始化页面控制器
final PageController controller = PageController(
  viewportFraction: 0.8, // 可根据需求调整比例，示例为单页默认占屏幕宽度的80%
);

// 页面构建代码
@override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  return PageView(
    controller: controller,
    padEnds: false,
    physics: const ClampingScrollPhysics(), // 可选，关闭iOS风格的弹性滑动效果
    children: <Widget>[
      Image.asset('img1.jpg', fit: BoxFit.cover),
      // 超宽的第二张图片，宽度设为屏幕宽度的1.2倍
      SizedBox(
        width: screenWidth * 1.2,
        child: Image.asset('img2.jpg', fit: BoxFit.cover),
      ),
      Image.asset('img3.jpg', fit: BoxFit.cover),
    ],
  );
}

如果需要实现滑动到超宽子组件时自动占满屏幕，可以监听PageController的页面切换事件，动态修改viewportFraction的值即可。

内容的提问来源于stack exchange，提问作者noname.cs