日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter有無狀態類與State及生命周期詳細介紹_Android

作者：聶大哥 ? 更新時間： 2022-11-15 編程語言

Flutter中的生命周期類似于Vue、React中的生命周期一樣，有初始化、狀態更新、停用、銷毀等。

在React中，組件分為函數式組件和類式組件，它們的區別就是一個無狀態、一個有狀態。那么在Flutter中亦是如此，它有兩種類，一種是無狀態類，一種是有狀態類。其生命周期的使用就是有狀態類的特定用法。

無狀態類

無狀態類內部有build方法，在表面上看 每次數據更新都會執行build方法。但實際上，在組件樹中，當每次數據發生變更時，無狀態類都會重新執行組件LessComponent對象。

class LessComponent extends StatelessWidget {
  const LessComponent({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

有狀態類

在有狀態類中，每次的數據發生變動，在組件樹中只會調用state下的build方法進行重新渲染。這時候就能保存state中的狀態。

所謂的狀態就是 state里的屬性。

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

狀態

剛才講到，狀態就是state中的屬性值。下面來個示例進行講解：

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  int count = 0;
  static const sum = 10;
  final nowDate = new DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('${sum}'),
          ElevatedButton.icon(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              icon: Icon(Icons.add), 
              label: Text('添加')
          )
        ],
      ),
    );
  }
}

例如 整型值count、常量 sum、當前時間。這都是屬于狀態值，它們存在的區別就是count可以通過setSatate進行改變。

當每次執行setState()時，此組件都會調用build方法進行將改變的數據進行重新渲染，以此來保證state中的屬性值的保存。

State生命周期

class FulComponent extends StatefulWidget {
  const FulComponent({Key? key}) : super(key: key);
  @override
  _FulComponentState createState() => _FulComponentState();
}
class _FulComponentState extends State<FulComponent> {
  int count = 0;
  static const sum = 10;
  final nowDate = new DateTime.now();
  @override
  void initState() { // 初始化生命周期鉤子
    super.initState();
    //初始化操作 在這里做
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 依賴發生變更時 執行
  }
  @override
  void reassemble() {
    super.reassemble();
    // 重新安裝時執行，一般在調試的時候用，在發正式版本時 不會執行
  }
  @override
  void didUpdateWidget(covariant FulComponent oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 組件發生變更時調用，當父組件有變動，子組件也會執行此方法
  }
  @override
  void deactivate() {
    super.deactivate();
    // 停用
  }
  @override
  void dispose() {
    super.dispose();
    // 銷毀
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('${sum}'),
          ElevatedButton.icon(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              icon: Icon(Icons.add),
              label: Text('添加')
          )
        ],
      ),
    );
  }
}

原文鏈接：https://honker.blog.csdn.net/article/details/124511565

欄目分類
最近更新