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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

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

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

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

無狀態(tài)類

無狀態(tài)類內(nèi)部有build方法，在表面上看 每次數(shù)據(jù)更新都會(huì)執(zhí)行build方法。但實(shí)際上，在組件樹中，當(dāng)每次數(shù)據(jù)發(fā)生變更時(shí)，無狀態(tài)類都會(huì)重新執(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ā)生變動(dòng)，在組件樹中只會(huì)調(diào)用state下的build方法進(jìn)行重新渲染。這時(shí)候就能保存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中的屬性值。下面來個(gè)示例進(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)前時(shí)間。這都是屬于狀態(tài)值，它們存在的區(qū)別就是count可以通過setSatate進(jìn)行改變。

當(dāng)每次執(zhí)行setState()時(shí)，此組件都會(huì)調(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ā)生變更時(shí) 執(zhí)行
  }
  @override
  void reassemble() {
    super.reassemble();
    // 重新安裝時(shí)執(zhí)行，一般在調(diào)試的時(shí)候用，在發(fā)正式版本時(shí) 不會(huì)執(zhí)行
  }
  @override
  void didUpdateWidget(covariant FulComponent oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 組件發(fā)生變更時(shí)調(diào)用，當(dāng)父組件有變動(dòng)，子組件也會(huì)執(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('添加')
          )
        ],
      ),
    );
  }
}

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

欄目分類
最近更新