flutter pageView

 

Flutter PageView 组件用法详解

/**
 *
 * - scrollDirection: 滚动方向，可以选择 Axis.horizontal 或 Axis.vertical。
 * - reverse: 反转，是否从最后一个开始算0。
 * - controller: PageController 控制页面行为，例如滚动、显示等。
 *   - initialPage: 控制初始显示的页面。
 *   - viewportFraction: 控制每个页面在屏幕上的占比。
 *   - keepPage: 控制是否保留页面的状态。
 * - physics: 控制页面滚动的物理效果，例如阻尼、水波纹等。
 * - pageSnapping: 控制页面是否具有回弹效果。
 * - onPageChanged: 页面改变时的回调函数。
 * - children: 页面的实际内容。
 */

示例代码

class _MyHomePageState extends State<MyHomePage> {
  PageController _pageController; // PageView 控制器
  Timer _timer;                  // 定时器
  int _index = 0;                // 当前页面索引

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: _index,       // 默认显示的页面
      viewportFraction: 1,       // 页面占满整个屏幕
      keepPage: true,            // 保留页面状态
    );

    // 创建定时器，用于自动滑动到下一个页面
    _timer = Timer.periodic(const Duration(seconds: 2), (timer) {
      _index++;
      _pageController.animateToPage(
        _index % 3,               // 循环显示3个页面
        duration: Duration(milliseconds: 16),
        curve: Curves.fastOutSlowIn,
      );
    });
  }

  @override
  void dispose() {
    _pageController.dispose();   // 销毁控制器
    _timer.cancel();             // 取消定时器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading: false,
        title: Text(widget.title),
      ),
      body: PageView(
        scrollDirection: Axis.horizontal, // 水平滚动方向
        reverse: false, // 从第一个页面开始
        controller: _pageController, // 使用上面定义的控制器
        physics: BouncingScrollPhysics(), // 阻尼效果
        pageSnapping: true, // 启用回弹效果
        onPageChanged: (index) {
          print('index=====$index'); // 监听页面改变
        },
        children: <Widget>[ // 定义3个页面的内容
          _buildPage('第1页', Colors.tealAccent),
          _buildPage('第2页', Colors.greenAccent),
          _buildPage('第3页', Colors.deepOrange),
        ],
      ),
    );
  }

  // 辅助函数，用于创建页面
  Widget _buildPage(String text, Color color) {
    return Container(
      color: color,
      child: Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.black, fontSize: 20.0),
        ),
      ),
    );
  }
}