flutter 最新版本 1.20.1 Widget之InteractiveViewer 学习总结
程序员文章站
2022-03-11 10:53:22
...
flutter 最新版本 1.20.1 InteractiveViewer 学习总结
Flutter 1.20版本引入了一个新的小部件 InteractiveViewer。该 InteractiveViewer 设计用于建设普通类型的交互性到应用程序,如: 平移,缩放和拖动“N”下降甚至大小调整,
这个例子展示了如何创建一个的表格
3列20行
一个for循环
行和列用不同的色彩分隔开
scaleEnabled 为 true 可以放大缩小 表格
@override
Widget build(BuildContext context) {
const int _rowCount = 20;
const int _columnCount = 3;
return Scaffold(
appBar: AppBar(
title: const Text('Pannable Table'),
),
body: InteractiveViewer(
constrained: false,
scaleEnabled: false,
child: Table(
columnWidths: <int, TableColumnWidth>{
for (int column = 0; column < _columnCount; column += 1)
column: const FixedColumnWidth(300.0),
},
children: <TableRow>[
for (int row = 0; row < _rowCount; row += 1)
TableRow(
children: <Widget>[
for (int column = 0; column < _columnCount; column += 1)
Container(
height: 100,
color: row % 2 + column % 2 == 1 ? Colors.black26 : Colors.black12,
),
],
),
],
),
),
);
}
子view可以实现 手势放大缩小 拖拽
state 实现 with TickerProviderStateMixin{
final TransformationController _transformationController = TransformationController();
Animation<Matrix4> _animationReset;
AnimationController _controllerReset;
void _onAnimateReset() {
_transformationController.value = _animationReset.value;
if (!_controllerReset.isAnimating) {
_animationReset?.removeListener(_onAnimateReset);
_animationReset = null;
_controllerReset.reset();
}
}
void _animateResetInitialize() {
_controllerReset.reset();
_animationReset = Matrix4Tween(
begin: _transformationController.value,
end: Matrix4.identity(),
).animate(_controllerReset);
_animationReset.addListener(_onAnimateReset);
_controllerReset.forward();
}
// Stop a running reset to home transform animation.
void _animateResetStop() {
_controllerReset.stop();
_animationReset?.removeListener(_onAnimateReset);
_animationReset = null;
_controllerReset.reset();
}
void _onInteractionStart(ScaleStartDetails details) {
// If the user tries to cause a transformation while the reset animation is
// running, cancel the reset animation.
if (_controllerReset.status == AnimationStatus.forward) {
_animateResetStop();
}
}
@override
void initState() {
super.initState();
_controllerReset = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 400),
);
}
@override
void dispose() {
_controllerReset.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).colorScheme.primary,
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Controller demo'),
),
body: Center(
child: InteractiveViewer(
boundaryMargin: EdgeInsets.all(double.infinity),
transformationController: _transformationController,
minScale: 0.1,
maxScale: 1.0,
onInteractionStart: _onInteractionStart,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[Colors.orange, Colors.red],
stops: <double>[0.0, 1.0],
),
),
),
),
),
persistentFooterButtons: [
IconButton(
onPressed: _animateResetInitialize,
tooltip: 'Reset',
color: Theme.of(context).colorScheme.surface,
icon: const Icon(Icons.replay),
),
],
);
}
学习flutter 可以详细查看下面这篇文章,flutter UI框架已经成功。可以直接使用
flutter demo
可以在github上查看
https://github.com/1136346879/flutter_shop
上一篇: 《Netty权威指南(第2版)》试读
下一篇: JDK5的枚举类型详细介绍 工作