1.介绍

Widget 主要用于显示PageView 有多少个Pager的指示器,可以实现简洁的指示器效果

图片[1]专注Flutter相关技术及工具SimplePageIndicator-指示器专注Flutter相关技术及工具Flutter经验之谈
效果图

2.如何使用?

  • 添加依赖

在命令行中切换到项目的根目录,添加下面的命令,按下回车键,等待即可

flutter pub add simple_page_indicator
  • 导入插件包
import 'package:simple_page_indicator/simple_page_indicator.dart';
  • 参数解释
参数类型参数名介绍
PageControllercontrollerPageView 的控制器
ColorindicatorColor 指示器的颜色
intitemCountPageView 的 item数量
doublespace指示器之间的空隙
doubleminSize最小的指示器大小
doublemaxSize最大的指示器大小
  • 简单使用

1.添加一个PageView

  //page 列表
  List<Color> pageList = [
    Colors.blue,
    Colors.red,
    Colors.green,
    Colors.black,
    Colors.purple,
  ];
  // page 控制器
  PageController pageController = PageController();

  // 伪代码
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 400,
      width: 400,
      child: PageView.builder(
        controller: pageController,
        itemBuilder: _buildItems,
        itemCount: pageList.length,
      ),
    );
  }
  //构建PageView 的 item
  Widget _buildItems(BuildContext context, int index) {
    return Container(
      color: pageList[index],
      child: Placeholder(),
    );
  }

2.添加指示器

  @override
  Widget build(BuildContext context) {
    return Column(        // 添加一个Column包裹 
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 400,
          width: 400,
          child: PageView.builder(
            controller: pageController,
            itemBuilder: _buildItems,
            itemCount: pageList.length,
          ),
        ),
        // new 
        SizedBox(
          height: 30,
        ),
        SimplePageIndicator(
          itemCount: pageList.length,
          controller: pageController,
          maxSize: 6,
          minSize: 3,
          indicatorColor: Colors.red,
          space: 14,
        ),
        // new 
      ],
    );
  }
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片