如何修复与手势竞争的InteractiveViewer和滚动视图
如何修复与手势竞争的InteractiveViewer和滚动视图
提问于 2022-08-19 00:47:40
我有一个垂直的scrollView，然后是一个水平的pageView，包含包装在InteractiveViewer中的图像。
但是当我尝试放大InteractiveViewer的时候，这是相当混乱的。所有这些滚动视图都在竞争手势，我习惯了一种更简单的方法来解决这个问题。
编辑:所以问题似乎在于onScale手势(GestureDetector())或2指针手势
我有一件事
CustomScrollView(
slivers: [
const SliverToBoxAdapter(
child: Container(
width: double.infinity,
height: 400,
child: PageView(
...
InteractiveViewer()
...
)
)
),
]
)回答 1
Stack Overflow用户
发布于 2022-08-26 05:03:57
当用户开始使用交互式时，可以禁用相关小部件的物理功能，可以根据比例、手指等添加一些条件。
ScrollPhysics _pagePhysics = const PageScrollPhysics();
ScrollPhysics _customScrollViewPhysics = const ScrollPhysics();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomScrollView(
// assign physic for scroll ------------------------
physics: _customScrollViewPhysics,
slivers: [
SliverToBoxAdapter(
child: SizedBox(
height: 400,
child: PageView(
// assign physic for page view --------------------
physics: _pagePhysics,
children: [
Container(
color: Colors.blue,
),
InteractiveViewer(
onInteractionStart: (details) {
/// you can add some condition like this
//if use 2 finger
//if(details.pointerCount == 2){}
// then disable physic
setState(() {
_pagePhysics = const NeverScrollableScrollPhysics();
_customScrollViewPhysics =
const NeverScrollableScrollPhysics();
});
},
onInteractionUpdate: (details) {
//condition based on scale
if (details.scale == 1.2) {}
},
onInteractionEnd: (details) {
// after interaction revert it
setState(() {
_pagePhysics = const PageScrollPhysics();
_customScrollViewPhysics = const ScrollPhysics();
});
},
child: Container(
color: Colors.yellow,
child: const Text("Lorem Ipsum"),
),
)
],
),
),
)
],
),
),
);
}如果interactiveviewer没有为页面查看或customScroll留出任何空间，那么添加一些按钮总是很好的，这样用户就不会卡在InteractiveViewer上了。你应该让你的ui像这样：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73410800
复制相关文章
相似问题
腾讯云开发者
