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

最新推荐文章于 2024-07-04 18:23:55 发布

初壹十五a

最新推荐文章于 2024-07-04 18:23:55 发布

阅读量3.2k

点赞数 1

分类专栏： Android Flutter 文章标签： Android Flutter

本文链接：https://blog.csdn.net/Android_SE/article/details/93758582

版权

本文是Flutter系列教程的一部分，将引导你实现一个无限滑动的PageView及其指示器。通过简单步骤，展示了如何关联PageView和指示器，最终完成一个基本的指示器功能。后续文章将进一步优化指示器并提供完整工程代码。

摘要由CSDN通过智能技术生成

您好，欢迎关注我的专栏，本文章是关于 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