widget基本功

本文主軸

• StatefulWidget
• 響應輸入的做法

stl/stf的差異

• Statelesswidget : 不需要可變狀態的widget
• StatefulWidget : 擁有可變狀態的widget,

Instagram.Facebook.tiktok 都有點讚點愛心功能
點下去就會更新愛心數量,甚至冒出動畫
起初練習都使用Statelesswidget,這就無法完成上述更新愛心數量的功能

stf範例

• p1 _CallBackViewState : state 紀錄著_size的變化
• p2.p3 可以注意到 setState : 會更新state告訴它_size更新
• p4 onTap 觸發grow (function) , onLongPress觸發 reduce (function)
• p5　setState後 , 會rebuild讓state更新後數值顯示在畫面

class CallBackView extends StatefulWidget {
  const CallBackView({Key? key}) : super(key: key);

  @override
  State<CallBackView> createState() => _CallBackViewState();
}

//p1
class _CallBackViewState extends State<CallBackView> {
  double _size = 1.0;
  //p2
  void grow() {
    setState(() {
      _size += 0.1;
    });
  }
  //p3
  void reduce() {
    setState(() {
      _size -= 0.1;
    });
  }

  @override
  //p5
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          MyApp.CALLBACK.replaceAll('/', '').toString(),
        ),
      ),
      body: SizedBox(
        child: GestureDetector(
          //p4
          onTap: grow,
          onLongPress: reduce,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blueAccent,
            transform: Matrix4.diagonal3Values(_size, _size, 1.0),
          ),
        ),
      ),
    );
  }
}

成果展示