一、概述
在开发过程中,我遇到了一个问题:PDF阅读,横屏切换为竖屏时,需要定位到横屏当前阅读的页码,而在竖屏页使用了LIstView滑动组件,所以初始化显示时就需要定位到当前阅读页码。
二、原理
根据横屏页面的页码,确定LIstView的初始滑动偏移量,然后使用定位方法_offsetController.position.moveTo(double)定位至这个值即可。
三、实现
首先需要获取滑动偏移量
ScrollController _offsetController= ScrollController(); //定义ListView的controller
var oldOffset; //定义初始滑动偏移量
if(!mounted) return;
setState(() {
_isVertical = !_isVertical;
oldOffset=(_pageNumber-1)*(screenHeight-90.px); //获取滑动偏移量
//在页面生命周期build结束之后,回调此方法进行定位
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
_offsetController.position.moveTo(oldOffset);
});
});
完成了横屏至竖屏的跳转,接着就是完成竖屏至横屏的跳转,也是根据滑动偏移量进行处理:
@override
void initState(){
super.initState();
//添加滑动监听
_offsetController.addListener(() {
//向下滑动超过一个页面的长度则_pageNumberr+1,反之减一
if((_offsetController.offset-oldOffset)>=(screenHeight-90.px)){
setState(() {
oldOffset=_offsetController.offset.toInt();
_pageNumber++;
});
}else if((oldOffset-_offsetController.offset)>=(screenHeight-90.px)){
setState(() {
oldOffset=_offsetController.offset.toInt();
_pageNumber--;
});
}
});
}
或者更简单
@override
void initState() {
super.initState();
_controller.addListener(_calcOffsetPosition);
}
_calcOffsetPosition() {
_currentIndex = _controller.offset ~/ (screenHeight - 90.px);
}
至此,就完成了LIstView的定位,实现横竖屏切换PDF阅读的功能。
网友评论