Flutter实现按项分页：单次滑动切1页居中且预览前后项部分内容

你要的效果可以通过Flutter官方的PageView组件直接实现，不需要引入第三方库，核心配置如下：

核心属性说明 #

• viewportFraction：属于PageController的配置项，设置小于1的数值即可控制单页在视口中的宽度占比，比如设置为0.8时，当前页占屏幕宽度的80%，左右两侧会各露出10%的相邻页内容，满足子项尺寸小于屏幕尺寸的要求
• pageSnapping：PageView的属性，设置为true即可开启单页吸附效果，每次滑动手势仅会切换一页，不会连续滚动多页
• padEnds：PageView的属性，设置为false可以关闭首尾页的默认侧边填充，保证第一页和最后一页也能正常居中显示

子项间距实现 #

直接给每个子项外层加水平Padding即可，不需要额外调整滑动逻辑，调整Padding的数值就能自定义子项之间的间距大小

完整可运行示例代码 #

import 'package:flutter/material.dart';

class CustomPaginationPage extends StatefulWidget {
  const CustomPaginationPage({super.key});

  @override
  State<CustomPaginationPage> createState() => _CustomPaginationPageState();
}

class _CustomPaginationPageState extends State<CustomPaginationPage> {
  // 初始化PageController，配置视口占比
  final PageController _pageController = PageController(viewportFraction: 0.8);
  int _currentPage = 0;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义分页效果")),
      body: PageView.builder(
        controller: _pageController,
        // 开启单页吸附，单次滑动仅切一页
        pageSnapping: true,
        // 关闭首尾默认填充，保证首尾项居中
        padEnds: false,
        onPageChanged: (index) => setState(() => _currentPage = index),
        itemCount: 8,
        itemBuilder: (context, index) {
          // 子项加水平Padding实现间距
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.primaries[index % Colors.primaries.length],
                borderRadius: BorderRadius.circular(16),
              ),
              alignment: Alignment.center,
              child: Text(
                "第 $index 项",
                style: const TextStyle(fontSize: 28, color: Colors.white),
              ),
            ),
          );
        },
      ),
    );
  }
}

使用时直接把CustomPaginationPage作为页面组件引入即可，可根据实际需求调整viewportFraction和Padding的数值，来匹配你要的相邻项露出宽度和子项间距效果。

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