flutter使用GestureDetector监听页面缩放了
可以使用ScaleGestureDetector来监听手势缩放操作。下面是一个简单的示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _scale = 1.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: GestureDetector(
onScaleUpdate: (ScaleUpdateDetails details) {
setState(() {
_scale = details.scale;
});
},
child: Transform.scale(
scale: _scale,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Scale: ${_scale.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
),
),
),
),
),
);
}
}
在上面的示例中,我们使用GestureDetector来监听手势缩放操作,并且使用Transform.scale来对Container进行缩放。onScaleUpdate回调函数会在缩放过程中被调用,我们可以在其中更新状态并重新构建UI来更新缩放效果。
原文地址: http://www.cveoy.top/t/topic/bd6Y 著作权归作者所有。请勿转载和采集!