用 Flutter 实现 PageView 指示器

最新推荐文章于 2025-03-11 22:14:33 发布

原创

最新推荐文章于 2025-03-11 22:14:33 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android

本文通过实例讲解如何在Flutter中创建无限滑动的PageView，并实现与其关联的指示器。首先，搭建无限滑动的PageView基础，接着创建一个简单的指示器，每个圆点代表一个页面，选中状态有颜色变化。最后，将PageView与指示器结合，利用onPageChanged更新UI。文章最后提到，后续将完善指示器功能，如选中放大效果，并分享完整项目代码。

本篇用一个PageView的实例来加深印象，并且在之后的专栏里，我们会深化这个示例，做成一个支持上下左右无限滑动的图片Banner，并且教你如何把他做成Dart library并且开放给其他人使用。

一.无限滑动的PageView

在实现PageView指示器之前，咱们需要先实现一个PageView。在Flutter中实现一个PageView很简单。

class BannerGalleryWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BannerGalleryWidgetState();
  }
}

class BannerGalleryWidgetState extends State<BannerGalleryWidget> {
  final PageController controller = PageController(initialPage: 200);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 250.0,
        child: Container(
          color: Colors.grey,
          child: PageView.builder(
            controller: controller,
            itemBuilder: (context, index) {
              return new Center(
                child: new Text('页面 ${index}'),
              );