it-技术

Flutter学习:用户交互

2019-01-23  本文已影响54人  缘始_

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 先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动
上一篇下一篇

猜你喜欢

热点阅读