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

最新推荐文章于 2024-11-19 19:31:57 发布

原创

最新推荐文章于 2024-11-19 19:31:57 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Flutter

本文是Flutter系列教程的一部分，将引导你实现一个无限滑动的PageView及其指示器。通过简单步骤，展示了如何关联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,

最低0.47元/天解锁文章