Flutter如何通过SmoothPageIndicator实现页面滑动切换效果

前提确认：已在pubspec.yaml中引入smooth_page_indicator依赖，已完成两个子页面Form_scan、Form_ttn的开发

• 第一步：将当前承载页面改为StatefulWidget，在State中声明PageController实例，和你现有的_pages列表、SmoothPageIndicator组件关联
• 第二步：使用PageView组件承载两个子页面，将PageController绑定到PageView的controller属性，即可原生支持左右滑动切换页面
• 第三步：实现_onchanged点击回调方法，处理点击指示器圆点时的页面跳转逻辑
• 第四步：无需额外配置指示器联动逻辑，只要SmoothPageIndicator和PageView绑定同一个PageController，切换页面时指示器会自动同步选中状态

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

// 替换为你自己的两个页面实现
class Form_scan extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, child: Center(child: Text("第一个页面：扫码页")));
  }
}
class Form_ttn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.green, child: Center(child: Text("第二个页面：TTN页")));
  }
}

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

  @override
  State<PageSwitchContainer> createState() => _PageSwitchContainerState();
}

class _PageSwitchContainerState extends State<PageSwitchContainer> {
  // 初始化页面控制器
  final PageController _pageController = PageController();
  // 你已有的页面列表
  final List<Widget> _pages = [
    Form_scan(),
    Form_ttn()
  ];

  // 实现指示器圆点点击回调
  void _onchanged(int index) {
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器避免内存泄漏
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // PageView占除指示器外的所有高度，承载可滑动页面
          Expanded(
            child: PageView(
              controller: _pageController,
              children: _pages,
            ),
          ),
          // 你已有的指示器代码
          Container(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: SmoothPageIndicator(
                controller: _pageController,
                count: _pages.length,
                effect: const JumpingDotEffect(
                  dotHeight: 16,
                  dotWidth: 16,
                  jumpScale: .7,
                  verticalOffset: 15,
                ),
                onDotClicked: _onchanged
            ),
          )
        ],
      ),
    );
  }
}

• 左右滑动切换功能由PageView原生提供，不需要额外监听滑动事件，默认支持横向滑动切换
• 点击圆点的跳转方法中animateToPage是带过渡动画的跳转，若不需要动画可以替换为jumpToPage
• 只要两个组件共用同一个PageController，滑动页面、点击切换页面都会自动同步指示器的选中状态，无需手动维护当前选中下标

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