有人能解释一下如何在颤动中放大/缩小点击点(在我的情况下是双击)吗?我正在使用下面的代码

Question

有人能解释一下如何放大/缩小点击点吗？在下面的代码中，它在一个点放大/缩小，我在转换小部件中给出了这个点作为对齐值(这里是FractionalOffset.topRight(，pich缩放也很好。有什么解决办法吗？这是我的密码。

class ImageZoom extends StatefulWidget {
static String routeName = "/image_zoom";
@override
_ImageZoomState createState() => _ImageZoomState();
}
class _ImageZoomState extends State<ImageZoom> {
var images = [
"https://images.pexels.com/photos/7291782/pexels-photo-7291782.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"https://images.pexels.com/photos/4041366/pexels-photo-4041366.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"https://images.pexels.com/photos/6455888/pexels-photo-6455888.png?auto=compress&cs=tinysrgb&dpr=1&w=500",
"https://images.pexels.com/photos/2543240/pexels-photo-2543240.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
];
//pageview
int currentIndex = 0;
PageController _controller = PageController();
double _scale = 1.0;
double _previousScale = 1.0;
void moveToPage(int index) {
if (_controller.hasClients) {
_controller.animateToPage(
0,
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
}
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
height: double.infinity,
width: double.infinity,
child: Column(
children: [
Flexible(
flex: 1,
child: Container(
child: PageView.builder(
pageSnapping: true,
reverse: false,
controller: _controller,
onPageChanged: (int page) {
setState(() {
currentIndex = page % images.length;
_scale = 1.0;
});
},
itemBuilder: (_, index) {
return GestureDetector(
onDoubleTap: () {
setState(() {
_scale = 3.0;
});
},
onTap: () {
setState(() {
_scale = 1.0;
});
},
onScaleStart: (scaleDetails) {
_previousScale = _scale;
setState(() {});
},
onScaleUpdate: (scaleDetails) {
_scale = _previousScale * scaleDetails.scale;
setState(() {});
},
onScaleEnd: (scaleDetails) {
_previousScale = 1.0;
setState(() {});
},
child: Transform(
alignment: FractionalOffset.topRight,
transform: Matrix4.diagonal3(
Vector3(_scale, _scale, _scale)),
child: Image.network(
images[index % images.length],
fit: BoxFit.contain,
),
),
);
}),
),
),
Container(
height: 80,
color: Colors.white,
child: ListView.separated(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
scrollDirection: Axis.horizontal,
itemBuilder: (_, index) {
return GestureDetector(
onTap: () {
moveToPage(index);
},
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5.0,
color: currentIndex == index
? Colors.green
: Colors.transparent),
)),
width: 50,
child: ExtendedImage.network(
images[index],
fit: BoxFit.fill,
cache: true,
clearMemoryCacheWhenDispose: true,
clearMemoryCacheIfFailed: true,
),
),
);
},
separatorBuilder: (_, index) {
return SizedBox(
width: 5,
);
},
itemCount: images.length,
),
),
],
),
),
),
);
}
}

Answer 1

如果您希望用户使用两根手指放大和缩小，请将您的图像放入InteractiveViewer小部件中。

Container(
height: 4000,
child: InteractiveViewer(
maxScale: 25,
child: Image.network(widget.image),
),

如果您希望用户在双击时更改图像大小，请将您的图像放入墨水池中，并在双击时更改高度和宽度

InkWell(
onDoubleTap: () {
setState(() {
zoom = !zoom
});
Container(
height: zoom ? 200 : 100,
width: zoom ? 200 : 100,
child: Image.asset(image))
}

确保有缩放的初始值(或者你想在代码中称之为的任何东西(