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

它是一個顆?；膶嶓w，是相對于建筑物的鋼筋，水泥，磚頭。他們個有特點，相互獨立，各有特性，同時又提供了某種可以內聚融合的對外接口。component（組件），widget（控件）下面都統稱組件，對component，widget有不同理解的朋友，希望能在評論區收到你們的見解和建議。

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

那為什么今天會記錄一下flutter的組件開發呢？因為我需要用flutter的方式去實現一個component。flutter是我不熟悉的一個ui框架。那些已經抽象出來的組件概念，需要使用flutter框架以及dart語言特性去把它實現出來。

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

1，組件要接受prop

2，組件要有默認的prop

3，組件內部有自己維護的變量

4，組件的prop可選

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

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

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

8，組件有必傳的prop

9，組件有可選的且無默認值的prop

那接下來我們用flutter一步步的實現上面的功能

【3，組件內部有自己維護的變量】

所以這個組件是個有自己狀態的組件，所以要繼承StatefulWidget

【1，組件要接受prop】

【2，組件要有默認的prop；】

代碼如下：

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

【8，組件有必傳的prop】，text參數必傳

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

【9，組件有可選的且無默認值的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使用實話判斷是否為null即可

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

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

這兩個更多是內部邏輯，根據特定的prop來重新賦值內部狀態的其他變量的值，這兩個變量一般是用枚舉的方式讓外面傳入

//按鈕類型：默認，邊框，危險,文字
enum Type { primary, dashed, warn, text }
//按鈕狀態：默認，加載中，禁用，點擊中
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();
//根據type來維護另外一個變量的值
     switch (widget.type) {
      case Type.primary:
        widget.color = Color.blue;
        break;
default:
        break;
    }
}
}

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

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

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

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

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

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