Flutter 中那么多组件，难道要都学一遍？

在 Flutter 中一切皆是 组件，仅仅 Widget 的子类和间接子类就有 350 多个，整理的 Flutter组件继承关系图 能够帮助你们更好的理解学习 Flutter，回归正题，如此多的组件到底若是学习，真的须要学习 350 多个组件？

在经济学中有一个著名的 二八定律

二八定律是意大利经济学家帕累托发现的。帕累托认为任何一组东西中最重要的只占其中一小部分约占20%，其他80%尽管是多数，倒是次要的。

而咱们学习 Flutter 也适用于二八定律，大部分组件是平时不多用到的，所以做为初学者，只需学习那 20% 经常使用的组件便可，经常使用的组件及案例地址：laomengit.com/guide/intro…

除了经常使用组件外，还总结了300多个其他组件到详细用法，这些组件能够做为手册，用到的时候在查阅便可，地址：laomengit.com/flutter/wid…

组件树

Flutter 建立App的时候，全部的组件最后会生成一个组件树，例如以下代码：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: Scaffold(
        body: Text('老孟'),
      ),
    );
  }
}复制代码

main 函数是应用程序开始的地方，运行 MyApp 组件。生成的组件树以下：

让 Text 组件居中，修改以下：

Scaffold(
  body: Center(
    child: Text('老孟'),
  ),
)复制代码

生成的组件树以下：

给应用程序添加 AppBar：

Scaffold(
  appBar: AppBar(),
  body: Center(
    child: Text('老孟'),
  ),
)复制代码

生成的组件树以下：

StatefulWidget vs StatelessWidget

Flutter 中组件分为 无状态组件（StatelessWidget） 和 有状态组件（StatefulWidget）两种。它们惟一的区别就是运行时 从新加载 组件的方式不一样，StatelessWidget 组件从新加载时从新建立当前组件的实例，而StatefulWidget组件从新加载时不会从新建立实例，而是从新执行 build 函数。

StatelessWidget 组件建立的方式：

class StatelessWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}复制代码

build 函数返回当前组件，此组件一旦建立将不可改变，build 函数只能执行一次。若是想从新绘制此组件，只能从新建立此组件新的实例。

StatefulWidget 组件建立的方式：

class StatefulWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();
}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}复制代码

StatefulWidget 组件的建立方式和 StatelessWidget 不一样，State<> 中的 build 函数返回当前组件，有状态的组件能够在其生命周期内屡次重绘，即屡次调用 build 函数，而不是建立一个新的实例。

StatefulWidget 组件重绘须要调用 setstate 方法，setstate 会使其自身及其子组件重绘，因此尽可能封装 StatefulWidget 组件，避免无效的重建和重绘，影响性能。

快速书写小技巧：在 Android Studio 和 VS Code 中 输入 stl 而后点击回车，能够快速建立 StatelessWidget 组件，同理输入 stf 点击回车，能够快速建立 StatefulWidget 组件，这是编辑器 Live Templates 的功能。

Material vs Cupertino

Flutter 中包含两套风格的组件，分别是 Material 和 Cupertino ，Cupertino 是 iOS风格的组件，命名都带 Cupertino 前缀，好比 CupertinoSlider 、 CupertinoDatePicker 等， Material Design 是由 Google 推出，旨在为手机、平板电脑、台式机和“其余平台”提供更一致、更普遍的“外观和感受”。

Flutter 使用一套代码在不一样的平台上表现一致，它不会根据不一样的平台绘制不一样的外形，好比使用 AlertDialog 弹出警告框，无论在 Android 上，仍是在 iOS上效果是同样。

但有一些功能 Flutter 区分平台，好比 ListView 滑动到底部时继续滑动，Android 底部会出现淡蓝色（默认状况下）拱形，而 iOS 上则没有，这是由于 Flutter 在封装此组件时在代码中区分了平台，因此在查看 Flutter 源码到过程当中会常常看到根据不一样的平台作不一样处理的状况。

交流

老孟Flutter博客地址（330个控件用法）：laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：