Flutter开发：PageView无法占满屏幕宽度的问题求助

问题根源 #

PageView 默认的 viewportFraction 属性值为 0.85，这会让每个页面仅占据屏幕宽度的85%，视觉上呈现出左右内边距；同时开启 pageSnapping: false 后，滑动时相邻页面的内容会暴露出来，造成内容串页的现象。

解决方案 #

1. 调整 PageView 的视口占比 #

给 PageView 添加 viewportFraction: 1.0，强制每个页面完全占满屏幕宽度：

return Scaffold(
  body: Container(
    color: Colors.blue,
    child: PageView(
      controller: _controller,
      pageSnapping: false,
      viewportFraction: 1.0, // 新增该行配置
      children: [
        BoardingItem(item: items[0]),
        BoardingItem(item: items[1]),
        BoardingItem(item: items[2]),
      ],
    ),
  ),
);

2. 优化内容布局（可选） #

为避免描述文本溢出页面范围，给文本组件添加对齐和溢出处理：

SizedBox(
  width: double.maxFinite,
  child: Text(
    widget.item['description']!,
    textAlign: TextAlign.center, // 居中对齐文本
    maxLines: 3, // 按需设置最大行数
    overflow: TextOverflow.ellipsis, // 溢出时显示省略号
    style: const TextStyle(fontSize: 14, color: Colors.grey),
  ),
),

修改后 PageView 的每个页面会完全填充屏幕宽度，默认边距和串页问题都会解决。

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