Flutter 用PageView做一个浏览图片的组件并显示图片总数和当前页数

本文链接：https://blog.youkuaiyun.com/Tymt_tt/article/details/107916046

Flutter 用PageView做一个浏览图片的组件并显示图片总数和当前页数

一般来说做一个图片浏览一般都是向左向右划，并且拿到图片总数和当前页数，下面是我做的一个效果图
效果如下

需要用到stack组件完成该功能，阴影的颜色之类可以自己调,这里用到的alignment: const FractionalOffset(0.9, 0.95)而没有用position里面的top,right,left,bottom之类是因为自适应的原因，如果用这些在大小不同的屏上会出现位置偏移甚至挤爆像素

				
  					int indexs = 1;
  					int mx = listdata.length;
  					//定义两个全局变量indexs为当前页数    mx 为最大页数
					  Stack(
                        alignment: const FractionalOffset(0.9, 0.95),//调整位置
                        children: <Widget>[
                          Container(
                            height: ScreenUtil().setHeight(428.0),
                            width: ScreenUtil().setWidth(343.0),
                            child: PageView(
                              onPageChanged: (index) {//index为当前是第几个
                                setState(() {
                                  indexs = index + 1;
                                });
                              },
                              controller: _pageController,
                              children: getimg(),//写图片组件
                            ),
                          ),
                          Positioned(

                            child: Container(
                              decoration: BoxDecoration(
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black45,
                                      offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                                      blurRadius: 1.0, //阴影模糊程度
                                      spreadRadius: 2.0 //阴影扩散程度
                                      )
                                ],
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              alignment: Alignment.center,
                              width: ScreenUtil().setWidth(50.0),
                              height: ScreenUtil().setHeight(20.0),
                              child: Text(
                                '$indexs/' + '$mx',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ],
                      ),

以上就是全部代码，如果有什么问题欢迎留言！baibai