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

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值