前言
最近开始用flutter开发公司里的项目,所以打算写一系列的博客,分享工作到遇到的一些难题和解决方法
需求
今天遇到一个需求,就是利用手势实现左右滑到新的页面
解决方式
就是用手势结合状态管理一起使用,从而达到这个需求
具体实现
return GestureDetector(
/********start 左右滑一段距离之后,触发事件**********/
/*横向拖动的开始状态*/
onHorizontalDragUpdate : (startDetails) {
/*获取是左滑还是右滑*/
if(startDetails.delta.direction>0){
Provide.value<IndexProvide>(context).changRight(0);
}else{
Provide.value<IndexProvide>(context).changRight(1);
}
},
onHorizontalDragEnd:(startDetails){
/*当手指离开界面的时候触发事件*/
if(Provide.value<IndexProvide>(context).isRight==0){
Provide.value<IndexProvide>(context).changePage(0);
Provide.value<IndexProvide>(context).changeState();
}else{
Provide.value<IndexProvide>(context).changePage(1);
Provide.value<IndexProvide>(context).changeState();
}
},
/****************end 左右滑一段距离之后,触发事件******************/
)
状态管理
import 'package:flutter/material.dart';
class IndexProvide with ChangeNotifier{
int nowPage=2; //当前的页数
int isRight=0; //是否右滑
changePage(val){ //改变页数
if(val==1){
nowPage=nowPage-1;
}else{
nowPage=nowPage+1;
}
notifyListeners();
}
changRight(val){
isRight=val;
}
}
这篇是小编早上遇到的问题,希望可以帮助到大家