1.介绍
该Widget
主要用于显示PageView
有多少个Pager
的指示器,可以实现简洁的指示器效果
2.如何使用?
- 添加依赖
在命令行中切换到项目的根目录,添加下面的命令,按下回车键,等待即可
flutter pub add simple_page_indicator
- 导入插件包
import 'package:simple_page_indicator/simple_page_indicator.dart';
- 参数解释
参数类型 | 参数名 | 介绍 |
---|---|---|
PageController | controller | PageView 的控制器 |
Color | indicatorColor | 指示器的颜色 |
int | itemCount | PageView 的 item数量 |
double | space | 指示器之间的空隙 |
double | minSize | 最小的指示器大小 |
double | maxSize | 最大的指示器大小 |
- 简单使用
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
],
);
}
暂无评论内容