Flutter组件开发过程完整讲解

首先统一一个概念，不管是component（组件），widget（控件），module（android的模块）在我的理解能力范围内，都是为了抽离某个特定的功能，对外接受参数，对内实现功能的某一个代码块。

它是一个颗粒化的实体，是相对于建筑物的钢筋，水泥，砖头。他们个有特点，相互独立，各有特性，同时又提供了某种可以内聚融合的对外接口。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-->