Flutter用PageView.builder和bottomNavigationBar做出底部小圆点效果

awildpig110

于 2024-11-19 19:31:57 发布

阅读量368

点赞数 9

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/awildpig110/article/details/143893311

版权

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对比来改变颜色


    ),);

  }),

),),

);


  }


}

做的有点丑但主要是达到效果