原文

在flutter使用TabController过程中

TabController _tabController;

基本概念

• 一切皆为Widgets
• 多组件容器(Row、Column、Stack、Wrap)
• 单组件容器(Container、Padding、Center、Align)
• Flutter组件的规律

Widgets

状态

stateful和stateless：实现Flutter app时,我们用widgets来构建app的UI。这些widgets有两种类型-statefule(有状态)和stateless(无状态)

在VSCode中进行Flutter热更新有几种方式：

1. 使用VSCode的Dart和Flutter插件，通过调试模式进行热重载：在VSCode中打开Flutter项目，点击调试按钮，选择"Start Debugging"，然后在调试面板中选择"Flutter"，点击绿色的运行按钮进行热重载。这种方式会在保存文件时自动进行热重载。

2. 使用VSCode的Dart和Flutter插件，通过命令行进行热重载：在VSCode中打开终端，运行flutter run命令启动应用程序，然后在终端中按下r键进行热重载。这种方式可以手动触发热重载。

3. 使用VSCode的Flutter Hot Reload插件：安装"Flutter Hot Reload"插件后，可以使用快捷键Ctrl+Shift+.或者点击编辑器右上角的"Hot Reload"按钮进行热重载。这种方式也可以在保存文件时自动进行热重载。

实现原理

在Android和IOS上，默认情况下Fultter和React Native都需要一个原生平台的Activity/ViewController支持，且在原生层面属于一个"单页面应用"，而他们之间最大的不通点在于UI构建

• React Native

  React Native是一套UI框架，默认情况下React Native会在Activity下加载JS文件，然后运行在JavascriptCore中解析Bundle文件布局，最终堆叠出一系列的原生控件进行渲染。

  简单来说就是通过JS代码配置页面布局，然后React Native最终会解析渲染成原生控件,如View标签对应ViewGroup/UIView，<ScrollView>标签对应ScrollView/UIScrollView，<Image>标签对应ImageView/UIImageView等。

  所以相较于如Ionic等框架而言，React Native让页面的性能得到进一步提升

• Flutter

  如果说React Native是为了开发者做了平台兼容，那Flutter则更想是为开发者屏蔽平台的概念。

  Flutter中只需平台提供一个Surface和一个Canvas，剩下的Flutter说你可以躺下了，我们自己来动

  Flutter中绝大部分的Widget都与平台无关，开发者基于Framework开发App，而Framework运行在Engine纸上，由Engine进行适配和跨平台支持。这个跨平台的支持过程，其实就是将Flutter UI中的Widget"数据化"，然后通过Engine上的Skia直接绘制到屏幕上