import 'package:flutter/material.dart';
void main(){
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(debugShowCheckedModeBanner: false,
home: GuidePage(),
);
}
}
class GuidePage extends StatefulWidget{
@override
State<StatefulWidget> createState() =>_GuidePage();
}
class _GuidePage extends State<GuidePage>{
int currentIndex=0;//这个为当前在那个页面的数值
List<Widget>pages=[//这个是viewpage中的内容有三个
Center(child: Container(width: 100,height: 100,child:Icon(Icons.change_history)),),
Center(child: Container(width: 100,height: 100,child: Icon(Icons.local_florist),),),
Center(child: Container(width: 100,height: 100,child: Icon(Icons.person),),)
];
void _changedPage(int index){//这个自定义方法在下面viewpage中获取当前页数传入currentIndex
setState(() {
currentIndex=index;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(body: PageView.builder(创建pageview.builder
onPageChanged: _changedPage,
itemBuilder: (context, index) {
return pages[index];//传入pages的内容
},itemCount: pages.length,),//传入上面定义的pages数量
bottomNavigationBar: //用这个实现小圆点
Container(color: Colors.white,//这里不是小圆点的颜色是背景颜色
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,//设置小圆点的排列
children: List.generate(pages.length, (index) {//List.generate创建小圆点
return Container(width: 20,height: 20,//小圆点的大小
decoration: BoxDecoration(shape: BoxShape.circle,//设置小圆点为圆形
color: currentIndex==index?Colors.grey:Colors.black//用当前index值与currentIndex对比来改变颜色
),);
}),
),),
);
}
}
做的有点丑但主要是达到效果
标签：index,PageView,Container,builder,currentIndex,child,100,小圆点 From： https://blog.csdn.net/awildpig110/article/details/143893311