Flutter系列（五）用 Flutter 实现 PageView 指示器

关注

VIP免费原创最新推荐文章于 2026-05-20 05:20:59 发布 3.4k 阅读 AI 写同款· GEO 优化 ›

Flutter系列（五）用-Flutter-实现-PageView-指示器 以上代码会得出这样一个界面。稍微解释一下代码：/// 指定一个控制器，用来控制PageView的滑动，以及初始位置在第200页/// 主要为了实现“无限循环”/// 一个固定大小的容器，这里指定了他的高为250/// 一个容器，用来设定背景颜色为灰色/// 主角PageView,文字居中显示当前的索引。阅读详情

您好，欢迎关注我的专栏，本文章是关于 Flutter 的系列文，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上篇文章我们从主题、提示、图片加载和动画四个方向介绍了Flutter的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,