我有一个图像从文件作为一个InteractiveView的子。交互式视图本身是PageView的子视图。由于页面控制器,我不得不在图像放大时禁用分页,以便用户可以平移图像而不会转到下一页。
但是,当图像被放大并一直平移到左侧或右侧时,我希望再次启用分页。我该怎么做?
import 'dart:io';
import 'package:flutter/material.dart';
class PhotoViewer extends StatefulWidget {
final List<String> photoPaths;
final int startIndex;
const PhotoViewer({
super.key,
required this.photoPaths,
this.startIndex = 0
});
@override
State<StatefulWidget> createState() => _PhotoViewerState();
}
class _PhotoViewerState extends State<PhotoViewer> {
late PageController _pageController;
int _selectedPageIndex = 0;
bool _pagingEnabled = true;
@override
void initState() {
super.initState();
_selectedPageIndex = widget.startIndex;
_pageController = PageController(initialPage: _selectedPageIndex);
}
@override
void dispose() {
super.dispose();
_pageController.dispose();
}
void _pageChanged(int index) {
if (_selectedPageIndex != index) {
_pageController.jumpToPage(index);
setState(() {
_selectedPageIndex = index;
});
}
FocusScope.of(context).unfocus();
}
void _onScaleChanged(double scale) {
setState(() {
_pagingEnabled = scale <= 1.0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Trip Photos"), backgroundColor: Colors.black, foregroundColor: Colors.white,),
body: Container(
color: Colors.black,
child: PageView(
physics: _pagingEnabled ? const PageScrollPhysics() : const NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: _pageChanged,
children: widget.photoPaths.map((path) => _InteractiveImage(path, _onScaleChanged)).toList(),
),
),
);
}
}
class _InteractiveImage extends StatefulWidget {
String imgPath;
Function(double) onScaleChanged;
_InteractiveImage(this.imgPath, this.onScaleChanged);
@override
State<StatefulWidget> createState() => _InteractiveImageState();
}
class _InteractiveImageState extends State<_InteractiveImage> {
late TransformationController _transformationController;
@override
void initState() {
super.initState();
_transformationController = TransformationController();
}
@override
void dispose() {
super.dispose();
_transformationController.dispose();
}
@override
Widget build(BuildContext context) {
return InteractiveViewer(
onInteractionEnd: (ScaleEndDetails? details) {
double scale = _transformationController.value.getMaxScaleOnAxis();
widget.onScaleChanged(scale);
},
transformationController: _transformationController,
child: Image.file(
File(widget.imgPath
)
),
);
}
}
1条答案
按热度按时间tjjdgumg1#
我遇到了一个类似的问题,当我发现“extended_image”包(https://pub.dev/packages/extended_image)时,它允许用户缩放,只有当图像边界到达其末端时才会滑动到下一页。
这里的关键参数是GestureConfig,它有很多属性,但我们需要的是inPageView。如果它被设置为true,我们得到我们想要的输出。您可以在其官方页面上了解更多信息。
验证码:
输出:-