点击,滑动等等手势。
GestureDetector
并复写onTap
回调代码实现
import 'package:flutter/material.dart';
/// 自定义button
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"),),
);
}
}
参考: https://flutter.io/cookbook/gestures/handling-taps/
使用InkWell
。
/// 带有波纹效果的按钮
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"),
),
);
}
}
Flutter提供的按钮控件还有RaisedButton
和FlatButton
。
步骤:
Dismissible
包装每一个itemfinal items = List<String>.generate(10, (i) => "Item $i");
创建字符串列表。这个列表不能放在build
中,要定义为State的全局变量。
否则删除item时,无法从view tree中移除item,从而报错。
设置Dismissible
的background,可以在删除时显示。
示例界面代码
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,
),
);
}),
);
}
}
behavior: HitTestBehavior.opaque
https://docs.flutter.io/flutter/rendering/HitTestBehavior-class.html