Flutter如何使用PageView实现页面切换

在Flutter中如何使用PageView实现页面切换？我尝试了PageView.builder和PageView.custom两种方式，但页面切换时总是出现卡顿或无法正常滑动的情况。请问如何正确配置PageView的controller和physics属性，以及是否需要配合PageController使用？另外，如何监听页面切换事件并获取当前页码？希望能提供完整的示例代码说明基本用法和常见问题的解决方案。

2 回复

使用PageView实现页面切换：

  1. 创建PageController控制页面
  2. 在PageView中设置controller和children
  3. 使用pageController.animateToPage()切换页面
  4. 可监听onPageChanged事件

示例：

PageController _controller = PageController();
PageView(
  controller: _controller,
  children: [Page1(), Page2(), Page3()],
)

更多关于Flutter如何使用PageView实现页面切换的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 PageView 组件可以实现水平或垂直方向的页面切换效果。以下是实现步骤和示例代码：

1. 基本用法

创建一个 PageView，通过滑动切换页面：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          children: <Widget>[
            Container(color: Colors.red, child: Center(child: Text('页面1'))),
            Container(color: Colors.green, child: Center(child: Text('页面2'))),
            Container(color: Colors.blue, child: Center(child: Text('页面3'))),
          ],
        ),
      ),
    );
  }
}

2. 控制页面切换

使用 PageController 控制页面跳转：

PageController _controller = PageController();

// 跳转到指定页面
_controller.animateToPage(
  1, // 页面索引
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

// 在PageView中绑定控制器
PageView(
  controller: _controller,
  children: [...],
)

3. 监听页面变化

通过 onPageChanged 回调监听页面切换：

PageView(
  onPageChanged: (int page) {
    print('当前页面: $page');
  },
  children: [...],
)

4. 完整示例

class PageViewExample extends StatefulWidget {
  @override
  _PageViewExampleState createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  PageController _controller = PageController();
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        onPageChanged: (int page) {
          setState(() {
            _currentPage = page;
          });
        },
        children: [
          Page(color: Colors.red, text: '页面1'),
          Page(color: Colors.green, text: '页面2'),
          Page(color: Colors.blue, text: '页面3'),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPage,
        onTap: (index) {
          _controller.animateToPage(
            index,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '页面1'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: '页面2'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: '页面3'),
        ],
      ),
    );
  }
}

class Page extends StatelessWidget {
  final Color color;
  final String text;

  Page({required this.color, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  }
}

主要属性说明：

  • scrollDirection：滑动方向（水平/垂直）
  • physics：滚动物理效果（如禁止滑动：NeverScrollableScrollPhysics()）
  • allowImplicitScrolling：是否缓存页面

通过以上方式即可实现流畅的页面切换效果。

回到顶部