Flutter中如何移除PageView组件首项前的多余前置空白间距？

问题表现 #

用PageView做图片轮播，初始化PageController时设置viewportFraction: 0.8实现一屏多显效果，运行后第一个卡片左侧出现一块多余空白，效果如下：

原有代码：

• 轮播布局代码

List<String> images = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIZccfNPnqalhrWev-Xo7uBhkor57_rKbkw&usqp=CAU",
  "https://cdn.dribbble.com/users/4684322/screenshots/18696799/media/722072055e079b1b7c88b1894a1128d7.png?compress=1&resize=1000x750&vertical=top"
];
return Container(
  color: Colors.red,
  width: double.infinity,
  height: 200,
  child: PageView.builder(
    itemCount: 2,
    pageSnapping: true,
    controller: _pageController,
    itemBuilder: (context, pagePosition) {
      return Container(
          margin: EdgeInsets.only(right: 10),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.network(
              images[pagePosition],
              fit: BoxFit.cover,
            ),
          ));
    },
  ),
);

• 控制器初始化代码

_pageController = PageController(viewportFraction: 0.8);

原因 #

这个空白不是代码bug，是PageView的默认布局逻辑：当viewportFraction小于1时，组件默认开启padEnds配置（默认值为true），自动在视口首尾加补白，让当前选中的页面始终居中显示。停在第一页时，左侧补白宽度为(1 - viewportFraction) / 2 * 视口宽度，就是你看到的那块多余间距。

解决方法 #

给PageView.builder加一行参数padEnds: false，关掉首尾自动补白的逻辑，第一页就会默认靠左对齐，多余空白直接消失。

修改后的PageView代码：

PageView.builder(
  itemCount: 2,
  pageSnapping: true,
  controller: _pageController,
  padEnds: false, // 关闭首尾自动补白
  itemBuilder: (context, pagePosition) {
    return Container(
        // 不想首项贴死容器边缘的话，可以给第一页加个左margin，和页间距保持一致
        margin: EdgeInsets.only(
          right: 10,
          left: pagePosition == 0 ? 10 : 0,
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(8.0),
          child: Image.network(
            images[pagePosition],
            fit: BoxFit.cover,
          ),
        ));
  },
)

补充说明 #

• padEnds是Flutter稳定版SDK自带的官方参数，没有兼容性问题，不需要引入第三方库
• 如果不需要首项左边留间距，直接保留原来的margin: EdgeInsets.only(right:10)即可，首项会直接贴齐视口左边缘
• 如果要整体视觉更统一，就按注释里的写法给第一页加10px左margin，首尾和页间的间距完全一致，效果更协调

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