Flutter有無狀態(tài)類與State及生命周期詳細(xì)介紹

更新時間：2022年09月26日 09:18:03 作者：聶大哥

這篇文章主要介紹了Flutter無狀態(tài)類、有狀態(tài)類、State、生命周期，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

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

無狀態(tài)類

無狀態(tài)類內(nèi)部有build方法，在表面上看每次數(shù)據(jù)更新都會執(zhí)行build方法。但實(shí)際上，在組件樹中，當(dāng)每次數(shù)據(jù)發(fā)生變更時，無狀態(tài)類都會重新執(zhí)行組件LessComponent對象。

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

有狀態(tài)類

在有狀態(tài)類中，每次的數(shù)據(jù)發(fā)生變動，在組件樹中只會調(diào)用state下的build方法進(jìn)行重新渲染。這時候就能保存state中的狀態(tài)。

所謂的狀態(tài)就是 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();
  }
}

狀態(tài)

剛才講到，狀態(tài)就是state中的屬性值。下面來個示例進(jìn)行講解：

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、當(dāng)前時間。這都是屬于狀態(tài)值，它們存在的區(qū)別就是count可以通過setSatate進(jìn)行改變。

當(dāng)每次執(zhí)行setState()時，此組件都會調(diào)用build方法進(jìn)行將改變的數(shù)據(jù)進(jìn)行重新渲染，以此來保證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();
    // 依賴發(fā)生變更時 執(zhí)行
  }
  @override
  void reassemble() {
    super.reassemble();
    // 重新安裝時執(zhí)行，一般在調(diào)試的時候用，在發(fā)正式版本時 不會執(zhí)行
  }
  @override
  void didUpdateWidget(covariant FulComponent oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 組件發(fā)生變更時調(diào)用，當(dāng)父組件有變動，子組件也會執(zhí)行此方法
  }
  @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('添加')
          )
        ],
      ),
    );
  }
}

到此這篇關(guān)于Flutter有無狀態(tài)類與State及生命周期詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Flutter狀態(tài)類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: