Flutter學習：用戶交互

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 先前與屏幕接觸並水平移動的指針不再與屏幕接觸，並在停止接觸屏幕時以特定速度移動