本文最后更新于:2020年10月9日 晚上
Flutter - 处理手势
点击,滑动等等手势。
处理点击
步骤
- 创建自定义button类
- 在其中使用
GestureDetector
并复写onTap
回调
代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| import 'package:flutter/material.dart';
class ButtonSample1 extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () { final snackBar = SnackBar(content: Text("Now you tap the $this"),); Scaffold.of(context).showSnackBar(snackBar); }, child: Container( padding: EdgeInsets.all(12.0), margin: EdgeInsets.all(12.0), decoration: BoxDecoration(color: Theme .of(context) .buttonColor, borderRadius: BorderRadius.circular(8.0)), child: Text("$this"),), ); }
}
DART
|
参考: https://flutter.io/cookbook/gestures/handling-taps/
带波纹效果的按钮
使用InkWell
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| class ButtonSample2 extends StatelessWidget { @override Widget build(BuildContext context) { return InkWell( onTap: () { final snackBar = SnackBar(content: Text("Now you tap the $this"),); Scaffold.of(context).showSnackBar(snackBar); }, child: Container( padding: EdgeInsets.all(12.0), child: Text("$this"), ), ); } }
DART
|
Flutter提供的按钮控件还有RaisedButton
和FlatButton
。
列表侧滑删除
步骤:
- 创建一个列表
- 用
Dismissible
包装每一个item
- 提供删除时的UI显示
创建列表
1
| final items = List<String>.generate(10, (i) => "Item $i");
DART
|
创建字符串列表。这个列表不能放在build
中,要定义为State的全局变量。
否则删除item时,无法从view tree中移除item,从而报错。
删除时的UI
设置Dismissible
的background,可以在删除时显示。
示例界面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| import 'package:flutter/material.dart';
class SwipeToDismissPage extends StatefulWidget { SwipeToDismissPage({Key key}) : super(key: key);
@override State<StatefulWidget> createState() { return SwipeState(); } }
class SwipeState extends State<SwipeToDismissPage> { final items = List<String>.generate(10, (i) => "Item $i");
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( "Swipe to dismiss", ), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { final item = items[index]; return Dismissible( key: Key(item), onDismissed: (direction) { setState(() { items.removeAt(index); print(direction); }); Scaffold.of(context) .showSnackBar(SnackBar(content: Text('remove $item'))); }, child: ListTile( title: Text('$item'), ), background: Container( color: Colors.red, ), ); }), ); } }
DART
|
选择GestureDetector的响应形式
1
| behavior: HitTestBehavior.opaque
DART
|
https://docs.flutter.io/flutter/rendering/HitTestBehavior-class.html