# Flutter - widgets 介紹

## 簡介
* Widget: 程式
* Element: 寫好Widget後flutter會遍歷Widget樹並調用createElement 去生成Element，生成後會觸發mount進行渲染，可以把Element想成cache，若每次都全部重新渲染會很耗效能，所以需要一個緩存的媒介
* RenderObject: 將程式渲染成人眼可見的介面


## Stateless widgets
* 無狀態，當該畫面是不需隨時間等任何因素所改變時適合使用
* **除非有動態的值要不然應都盡量使用Stateless**，以維持APP效能

## Stateful widgets
* 有狀態為動態的，當畫面需要隨著點擊等事件而改變時適合使用，例如:點擊愛心後愛心由灰色變為粉色時。

### 生命週期

#### initState
該方法可以得到 context，但無法真正使用它，因為框架還沒有完全將其與 state 關聯。

一旦 initState() 方法執行完成，State 物件就被初始化並且 context 變為可用。

#### didChangeDependencies
在這一階段，由於 context 是可用的，所以你可以使用它。

如果你的 Widget 連結到了一個 InheritedWidget 並且/或者你需要初始化一些 listeners（基於 context），通常會重寫該方法。

#### dispose
在 widget 被廢棄時被呼叫。

如果你需要執行一些清理操作（比如：listeners），則重寫該方法，並在此之後立即呼叫 super.dispose()。

### 其他狀態
#### 判斷 APP 位於前景或背景

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        // TODO: Handle this case.
        break;
      case AppLifecycleState.inactive:
        // TODO: Handle this case.
        break;
      case AppLifecycleState.paused:
        // TODO: Handle this case.
        break;
      case AppLifecycleState.detached:
        // TODO: Handle this case.
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

#### 注意事項
* 為避免暫停UI渲染造成畫面上的停頓，若有異步的功能(例如: 乎郊外部API等)，應將該資料儲存為狀態共build()使用
* didUpdateWidget在父物件進更改或重繪時調用，此情況會獲得oldWidget作為參數，可以使用此參數進行比較並執行相關操作
* 當自己需要背改變或重繪時可以呼叫setState()，重新進行build()

## Inherited widgets
透過 Inherited widget 就能讓資料在不同的 Widget 中分享，provider就是用此原理。


## 參考資料
https://juejin.cn/post/6845166891539906574

###### tags: `flutter`