patton99/hyzp_ybqx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hyzp_ybqx-Commit154：使用自定义 my_flutter_drag_scale 插件，完美解决Listview滚动与图片缩放拖动之间的手势冲突，不会消耗点击事件，滚动很灵敏

Browse Source
This commit is contained in:
WinUser01
2022-05-10 09:11:41 +08:00
parent f02a06d237
commit e08f8bc930
87 changed files with 3965 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/Works/HYSH/hysh_content_new.dart
+235 -77
View File
@@ -11,7 +11,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:hyzp_ybqx/widget/my_superplayer.dart';
import 'package:keyboard_avoider/keyboard_avoider.dart';
import 'package:photo_view/photo_view.dart';
// import 'package:photo_view/photo_view.dart';
import '../../../components/commonFun.dart';
import '../../../components/dioFun.dart';
@@ -254,29 +254,6 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
}
}
// 使用 cached_network_image 插件实现网络图片缓存
// 使用 flutter_drag_scale 实现可缩放可拖拽双击放大的图片功能。PhotoView插件不好用，有问题
Widget getNetworkImage(String url) {
return CachedNetworkImage(
imageUrl: url,
alignment: Alignment.topCenter,
imageBuilder: (context, imageProvider) => DragScaleContainer(
doubleTapStillScale: true, child: Image(image: imageProvider, fit: BoxFit.fill)
// child: Image(
// image: NetworkImage(
// 'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
// ),
),
// imageBuilder: (context, imageProvider) => PhotoView(
// imageProvider: imageProvider,
// ),
//placeholder: (context, url) => CircularProgressIndicator(),
placeholder: (context, url) =>
getMoreWidget(color: Colors.black38, size: 20.0, strokeWidth: 2.0),
errorWidget: (context, url, error) => Icon(Icons.error),
);
}
//3、得到违章图片说明信息组件
Widget getWztpSmxx(int index) {
return Container(
@@ -541,6 +518,127 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
);
}
// 使用 cached_network_image 插件实现网络图片缓存
// 使用 flutter_drag_scale 实现可缩放可拖拽双击放大的图片功能。PhotoView插件不好用，有问题
// Widget getNetworkImage0(String url) {
// return CachedNetworkImage(
// imageUrl: url,
// alignment: Alignment.topCenter,
// imageBuilder: (context, imageProvider) => DragScaleContainer(
// doubleTapStillScale: true, child: Image(image: imageProvider, fit: BoxFit.fill)
// // child: Image(
// // image: NetworkImage(
// // 'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
// // ),
// ),
// // imageBuilder: (context, imageProvider) => PhotoView(
// // imageProvider: imageProvider,
// // ),
// //placeholder: (context, url) => CircularProgressIndicator(),
// placeholder: (context, url) =>
// getMoreWidget(color: Colors.black38, size: 20.0, strokeWidth: 2.0),
// errorWidget: (context, url, error) => Icon(Icons.error),
// );
// }
// 使用 Listener onPointerDown、onPointerUp方法，可以实现，但会消耗点击事件，导致缩放迟钝
// Widget getNetworkImage1(String url) {
// return ClipRect(
// child: Listener(
// child: PhotoView.customChild(
// // imageProvider: NetworkImage(widget.imageUrl),
// // imageProvider: CachedNetworkImageProvider(widget.imageUrl),
// minScale: 1.0,
// backgroundDecoration: BoxDecoration(color: Colors.white),
// child: CachedNetworkImage(
// alignment: Alignment.center,
// imageUrl: getMediaUrl(url),
// fit: BoxFit.fill,
// placeholder: (context, url) =>
// getMoreWidget(color: Colors.black38, size: 20.0, strokeWidth: 2.0),
// errorWidget: (context, url, error) => Icon(Icons.error),
// ),
// scaleStateChangedCallback: (PhotoViewScaleState statue) {
// print('PhotoViewScaleState 状态：$statue');
// switch (statue) {
// case PhotoViewScaleState.originalSize:
// case PhotoViewScaleState.zoomedOut:
// case PhotoViewScaleState.initial:
// bZoomedInit = false;
// break;
// default:
// bZoomedInit = true;
// break;
// }
// print("bZoomedIn = $bZoomedInit");
// },
// ),
// onPointerDown: (event) {
// scrollPhysics = null;
// if (bZoomedInit) {
// scrollPhysics = NeverScrollableScrollPhysics();
// setState(() {});
// print("down $event");
// }
// },
// // onPointerMove: (event) => print("move $event"),
// onPointerUp: (event) {
// scrollPhysics = null;
// if (bZoomedInit) {
// scrollPhysics = null;
// setState(() {});
// print("up $event");
// }
// },
// ),
// );
// }
// 使用自定义 my_flutter_drag_scale 插件，完美解决Listview滚动与图片缩放拖动之间的手势冲突，不会消耗点击事件，滚动很灵敏
Widget getNetworkImage(String url) {
return CachedNetworkImage(
imageUrl: url,
alignment: Alignment.topCenter,
placeholder: (context, url) =>
getMoreWidget(color: Colors.black38, size: 20.0, strokeWidth: 2.0),
errorWidget: (context, url, error) => Icon(Icons.error),
imageBuilder: (context, imageProvider) {
return DragScaleContainer(
doubleTapStillScale: false,
child: Image(image: imageProvider, fit: BoxFit.fill),
scaleChangedCallback: (ScaleChangedModel model) {
print("model.scale = ${model.scale}");
if (1.0 == model.scale) {
bZoomedInit = true;
scrollPhysics = PageScrollPhysics();
} else {
bZoomedInit = false;
scrollPhysics = NeverScrollableScrollPhysics();
}
setState(() {});
},
pointerDownCallback: () {
if (bZoomedInit) {
if (scrollPhysics != PageScrollPhysics()) {
scrollPhysics = PageScrollPhysics();
setState(() {});
}
} else {
if (scrollPhysics != NeverScrollableScrollPhysics()) {
scrollPhysics = NeverScrollableScrollPhysics();
setState(() {});
}
}
},
pointerUpCallback: () {
scrollPhysics = PageScrollPhysics();
setState(() {});
},
);
},
);
}
//2、得到违章图片组件
Widget getWztp(int index) {
print('ratioList[index] = ${ratioList[index]}');
@@ -553,12 +651,12 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
height: ScreenUtil().setHeight(22 + 1022 * g_radioImage), // 兴文县的违章图片无法获取，暂时调整
// height: ScreenUtil()
// .setHeight(22 + 1022 * (ratioList.isNotEmpty ? ratioList[index] : 9 / 16)),
decoration: BoxDecoration(
//color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
// decoration: BoxDecoration(
// color: Colors.white,
// borderRadius: BorderRadius.all(
// Radius.circular(12),
// ),
// ),
),
Positioned(
//left: ScreenUtil().setWidth(25),
@@ -569,9 +667,10 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
// ScreenUtil().setHeight(1022 * (ratioList.isNotEmpty ? ratioList[index] : 9 / 16)),
height: ScreenUtil().setHeight(1022 * g_radioImage),
// 兴文县的违章图片无法获取，暂时调整
// child: getNetworkImage(getMediaUrl(listGetZpjl[index]['pic_url'])),
child: getNetworkImage(getMediaUrl(listGetZpjl[index]['pic_url'])),
),
)
),
],
);
}
@@ -597,6 +696,9 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
double _marginVertical5 = 10;
double _marginVertical6 = 20;
ScrollPhysics scrollPhysics;
bool bZoomedInit = true; // 图片是否为原样大小
Future getTopTabsMap() async {
//map遍历，清空数据
topTabs_map.forEach((key, value) {
@@ -628,48 +730,48 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
.add(CarNumberAndCpysItems(index, topTabs_map['cpysText_List'][index]));
//Tab页面
topTabs_map['listView_List'].add(
//flutter开发弹起键盘出现Overflow问题的解决方法，我出现的情况，这三种方法就可以解决。
KeyboardAvoider(
autoScroll: true,
child: Container(
decoration: new BoxDecoration(
color: Color.fromRGBO(244, 244, 244, 1),
),
child: Column(
children: <Widget>[
//1、得到格林曼黑度标准和视频播放按钮组件
getHdAndPlay(index),
//2、得到违章图片组件
getWztp(index),
SizedBox(height: ScreenUtil().setHeight(_marginVer)),
//3、得到违章图片说明信息组件
getWztpSmxx(index),
SizedBox(height: ScreenUtil().setHeight(_marginVer)),
//4、得到黑烟初审结果组件，在复审页面需要
widget.hyshlx == 'hyfh' ? getHycsResult(index) : SizedBox.shrink(),
//为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
//5-6、得到黑烟审核组件、审核确认组件
HyshGroup(
index: index,
hyshlx: hyshlx,
fontSize: _fontSize,
size: Size(_listTileHeight, _listTileHeight),
id: widget.id,
selectedRadio:
hyshlx == 'hyfh' && mapGetHycsShenheData['title'] == "非黑烟车" ? 1 : 0,
),
//为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
// SizedBox(height: 6),
// Divider(height: 1.0, color: Colors.blue),
// SizedBox(height: 10),
// //9、得到审核确认组件
// getShqr(index),
],
),
),
),
);
topTabs_map['listView_List'].add(SizedBox.shrink()
//flutter开发弹起键盘出现Overflow问题的解决方法，我出现的情况，这三种方法就可以解决。
// KeyboardAvoider(
// autoScroll: true,
// child: Container(
// decoration: new BoxDecoration(
// color: Color.fromRGBO(244, 244, 244, 1),
// ),
// child: Column(
// children: <Widget>[
// //1、得到格林曼黑度标准和视频播放按钮组件
// getHdAndPlay(index),
// //2、得到违章图片组件
// getWztp(index),
// SizedBox(height: ScreenUtil().setHeight(_marginVer)),
// //3、得到违章图片说明信息组件
// getWztpSmxx(index),
// SizedBox(height: ScreenUtil().setHeight(_marginVer)),
// //4、得到黑烟初审结果组件，在复审页面需要
// widget.hyshlx == 'hyfh' ? getHycsResult(index) : SizedBox.shrink(),
// //为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
// //5-6、得到黑烟审核组件、审核确认组件
// HyshGroup(
// index: index,
// hyshlx: hyshlx,
// fontSize: _fontSize,
// size: Size(_listTileHeight, _listTileHeight),
// id: widget.id,
// selectedRadio:
// hyshlx == 'hyfh' && mapGetHycsShenheData['title'] == "非黑烟车" ? 1 : 0,
// ),
// //为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
// // SizedBox(height: 6),
// // Divider(height: 1.0, color: Colors.blue),
// // SizedBox(height: 10),
// // //9、得到审核确认组件
// // getShqr(index),
// ],
// ),
// ),
// ),
);
}
}
@@ -830,10 +932,66 @@ class _HyshPageState extends State<HyshContentNew> with SingleTickerProviderStat
//type 'Container' is not a subtype of type 'PreferredSizeWidget'
body: listGetZpjl.isNotEmpty
? TabBarView(
controller: _tabController, //注意：用TabController实现顶部tab切换，必须添加该行
physics: NeverScrollableScrollPhysics(), //必须放到TabBarView下面，禁止TabBarView左右滑动-OK
children:
(topTabs_map['listView_List'].isNotEmpty) ? topTabs_map['listView_List'] : [],
controller: _tabController,
//注意：用TabController实现顶部tab切换，必须添加该行
physics: NeverScrollableScrollPhysics(),
//必须放到TabBarView下面，禁止TabBarView左右滑动-OK
// children:
// (topTabs_map['listView_List'].isNotEmpty) ? topTabs_map['listView_List'] : [],
// https://blog.csdn.net/shulianghan/article/details/104953053
// 集合的生成函数
// int length 参数 : 集合的长度
// E generator(int index) : 集合的回调函数 , 调用该函数获取集合的 index 位置的元素
// List list_generate = List.generate(3, ( index ) => index * 3);
// children: List.generate(3, (index) => Container()),
children: List.generate(topTabs_map['listView_List'].length, (index) {
return ListView(
// physics: NeverScrollableScrollPhysics(), // 允许ListView滚动
// physics: null, // 允许ListView滚动
physics: scrollPhysics,
children: [
Container(
decoration: new BoxDecoration(
color: Color.fromRGBO(244, 244, 244, 1),
),
child: Column(
children: <Widget>[
//1、得到格林曼黑度标准和视频播放按钮组件
getHdAndPlay(index),
//2、得到违章图片组件
getWztp(index),
SizedBox(height: ScreenUtil().setHeight(_marginVer)),
//3、得到违章图片说明信息组件
getWztpSmxx(index),
SizedBox(height: ScreenUtil().setHeight(_marginVer)),
//4、得到黑烟初审结果组件，在复审页面需要
widget.hyshlx == 'hyfh' ? getHycsResult(index) : SizedBox.shrink(),
//为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
//5-6、得到黑烟审核组件、审核确认组件
HyshGroup(
index: index,
hyshlx: hyshlx,
fontSize: _fontSize,
size: Size(_listTileHeight, _listTileHeight),
id: widget.id,
selectedRadio:
hyshlx == 'hyfh' && mapGetHycsShenheData['title'] == "非黑烟车"
? 1
: 0,
),
//为了用户在切换审核结果Radio时显示不同图片，必须将以下组件都移入到RadioListItems类中
// SizedBox(height: 6),
// Divider(height: 1.0, color: Colors.blue),
// SizedBox(height: 10),
// //9、得到审核确认组件
// getShqr(index),
],
),
),
],
);
}),
)
: getMoreWidget(color: Colors.black38, size: 20.0, strokeWidth: 2.0), //显示加载中的圈圈
),