用 Flutter 实现 PageView 指示器

Android-开发者

于 2019-07-15 17:47:31 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签： Android

本文链接：https://blog.youkuaiyun.com/beibei_programme/article/details/95993782

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇用一个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(
                c

最低0.47元/天解锁文章