自带组件使用 widget | 蓁祎家进步中

# StatefulWidget vs StatelessWidget

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

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6
7
8
9
10
11

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

TIP

在 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 源码到过程中会经常看到根据不同的平台做不同处理的情况。

# 自带组件使用 widget

# StatefulWidget vs StatelessWidget

# Material vs Cupertino