快捷導(dǎo)航

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

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

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

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

無(wú)狀態(tài)類

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

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)，在組件樹(shù)中只會(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中的屬性值。下面來(lái)個(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可以通過(guò)setSatate進(jìn)行改變。

當(dāng)每次執(zhí)行setState()時(shí)，此組件都會(huì)調(diào)用build方法進(jìn)行將改變的數(shù)據(jù)進(jìn)行重新渲染，以此來(lái)保證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('添加')
          )
        ],
      ),
    );
  }
}

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

您可能感興趣的文章: