首先統(tǒng)一一個概念，不管是component（組件），widget（控件），module（android的模塊）在我的理解能力范圍內(nèi)，都是為了抽離某個特定的功能，對外接受參數(shù)，對內(nèi)實(shí)現(xiàn)功能的某一個代碼塊。

它是一個顆粒化的實(shí)體，是相對于建筑物的鋼筋，水泥，磚頭。他們個有特點(diǎn)，相互獨(dú)立，各有特性，同時又提供了某種可以內(nèi)聚融合的對外接口。component（組件），widget（控件）下面都統(tǒng)稱組件，對component，widget有不同理解的朋友，希望能在評論區(qū)收到你們的見解和建議。

在前端開發(fā)中，不管vue，react，jquery，原生（html，js，css組合）都提供了或可封裝組件的功能。那其它們都是存在共性的，只有深入淺出之后，抽象出這種通用的概念，我們才可以輕松的在不同的框架，語言之中，快速實(shí)現(xiàn)我們所想要的功能。

那為什么今天會記錄一下flutter的組件開發(fā)呢？因?yàn)槲倚枰胒lutter的方式去實(shí)現(xiàn)一個component。flutter是我不熟悉的一個ui框架。那些已經(jīng)抽象出來的組件概念，需要使用flutter框架以及dart語言特性去把它實(shí)現(xiàn)出來。

熟悉vue，react的童鞋們，對組件可以會有一下的一些概念：

1，組件要接受prop

2，組件要有默認(rèn)的prop

3，組件內(nèi)部有自己維護(hù)的變量

4，組件的prop可選

5，組件的prop有特定的值，如果不匹配到的屬性值無效（枚舉）

6，組件同一個prop屬性的不同值會有不同的樣式（例如antd button的type）

7，組件的多個prop會組成不同的樣式 例如antd button的type和status（warn，danger，loading）

8，組件有必傳的prop

9，組件有可選的且無默認(rèn)值的prop

那接下來我們用flutter一步步的實(shí)現(xiàn)上面的功能

【3，組件內(nèi)部有自己維護(hù)的變量】

所以這個組件是個有自己狀態(tài)的組件，所以要繼承StatefulWidget

【1，組件要接受prop】

【2，組件要有默認(rèn)的prop；】

代碼如下：

class Button extends StatefulWidget {
  double height = 48;//默認(rèn)prop
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}

【8，組件有必傳的prop】，text參數(shù)必傳

class Button extends StatefulWidget {
final String text;
Button(
      {
super.key,
      required this.text
});
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}

【9，組件有可選的且無默認(rèn)值的prop】，okTxt可選

【4，組件的prop可選】

class Button extends StatefulWidget {
final String? okTxt;
Button(
      {
super.key,
       this.okTxt
});
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}

Oktext使用實(shí)話判斷是否為null即可

【6，組件同一個prop屬性的不同值會有不同的樣式（例如antd button的type）】

【7，組件的多個prop會組成不同的樣式 例如antd button的type和status（warn，danger，loading）】

這兩個更多是內(nèi)部邏輯，根據(jù)特定的prop來重新賦值內(nèi)部狀態(tài)的其他變量的值，這兩個變量一般是用枚舉的方式讓外面?zhèn)魅?/p>

//按鈕類型：默認(rèn)，邊框，危險,文字
enum Type { primary, dashed, warn, text }
//按鈕狀態(tài)：默認(rèn)，加載中，禁用，點(diǎn)擊中
enum Status { primary, loading, disabled }
class Button extends StatefulWidget {
Type type = Type.primary;
  Status status = Status.primary;
Color color =Colors.red;
Button(
      {super.key,
      this.type = Type.primary,
      this.status = Status.primary,
       required this.text}
);
}
class _ButtonState extends State<Button>{
  @override
  void initState() {
    super.initState();
//根據(jù)type來維護(hù)另外一個變量的值
     switch (widget.type) {
      case Type.primary:
        widget.color = Color.blue;
        break;
default:
        break;
    }
}
}

最后一個疑問？_ButtonState是干嘛的，它內(nèi)部如何訪問Button內(nèi)聲明的變量呢？

_ButtonState是一個提供可訪問該組件的生命周期和實(shí)現(xiàn)組件具體頁面渲染內(nèi)容的類，而不只是state管理。只是名字看起來讓人感覺像是vue的vuex或者react的state，也有可能頁面渲染dom在StatefulWidget內(nèi)也算是個狀態(tài)吧。

通過widget[變量名]（例如widget.type）的方式可以訪問到Button class的內(nèi)部申明的變量（prop）

到此為止，如果能夠理解上面的概念，就可以使用flutter寫出一個滿足日常工作需要的基礎(chǔ)組件。

附加一個內(nèi)容，如果組件需要用到動畫，那需用用到混入，用過vue的童鞋可以很容易理解。flutter通過width的語句來混入其他功能，代碼：

class _ButtonState extends State<Button> with SingleTickerProviderStateMixin {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->