flutter用户交互,首先了解一下StatelessWidget
(无状态)和StatefulWidget
(有状态)这两个类,在与用户交互时,我们选择有状态的,需要继承StatefulWidget
,具体步骤如下:
class TestStatefulWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return null;
}
}
class TestWidget extends State<TestStatefulWidget>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return null;
}
}
对于如何管理Widget的状态,一般有以下两种:
1.通过widget管理自己的状态。
class TestStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => TestWidget();
}
class TestWidget extends State<TestStatefulWidget> {
bool active;
@override
void initState() {
// TODO: implement initState
super.initState();
active = false;
}
_halde() {
setState(() {
active = !active;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GestureDetector(
onTap: _halde,
child: new Container(
child: Text(
active ? "hello world1" : "hello world hello world",
style: TextStyle(fontSize: 50),
),
),
);
}
}
2.父widget管理widget的状态,父组件告诉Widget何时更新。
class TestStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => TestWidget();
}
class TestWidget extends State<TestStatefulWidget> {
bool active;
@override
void initState() {
// TODO: implement initState
super.initState();
active = false;
}
void _halde(bool newActive) {
setState(() {
active = newActive;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
child: new TestChildrenWidget(
active: active,
onChanged: _halde,
),
);
}
}
class TestChildrenWidget extends StatelessWidget{
bool active;
ValueChanged<bool> onChanged;//接收一个参数的用户回调
TestChildrenWidget({Key key,this.active:false,@required this.onChanged}):super(key:key);
void _haldleTab(){
onChanged(!active);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new GestureDetector(
onTap: _haldleTab,
child: new Container(
child: Text(
active ? "hello world1" : "hello world hello world",
style: TextStyle(fontSize: 100),
),
),
);
}
}
3.混合管理:在开发中,一般根据需求,通过自己管理或父Widget来管理自己的状态。
Flutter的基本手势。
flutter的基本手势指令都在GestureDetector
中,有
点击
onTapDown 指针已经在特定位置与屏幕接触
onTapUp 指针停止在特定位置与屏幕接触
onTap tap事件触发
onTapCancel 先前指针触发的onTapDown不会在触发tap事件
双击
onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
长按
onLongPress 指针在相同位置长时间保持与屏幕接触
垂直拖动
onVerticalDragStart 指针已经与屏幕接触并可能开始垂直移动
onVerticalDragUpdate 指针与屏幕接触并已沿垂直方向移动.
onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动
水平拖动
onHorizontalDragStart 指针已经接触到屏幕并可能开始水平移动
onHorizontalDragUpdate 指针与屏幕接触并已沿水平方向移动
onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动