Flutter Widgets 基础介绍

参考：https://flutter.dev/docs/development/ui/widgets-intro

1.设计来源

设计灵感来自于React,所以有很多相似之处，Flutter是很多Widget构建的，类似与React的组件概念，ReactObject类似与虚拟DOM,两者都有路由的概念，都可以是单页面应用，都有Diff预算，都是基于状态更新“虚拟DOM”，但是Flutter是根据 "虚拟DOM"去做屏幕绘制，而React则是构建DOM节点(个人理解，如有错误请指出!2021.3.21 夜)

Flutter widgets are built using a modern framework that takes inspiration from [React]

2.控件分类

a.StatelessWidget 无状态控件

b.StatefulWidget 有状态控件

3.控件职责

控件本质就是为了最终转换成RenderObject,从而为后面的绘制提供依据

A widget’s main job is to implement a [`build()`](https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html) function, which describes the widget in terms of other, lower-level widgets. The framework builds those widgets in turn until the process bottoms out in widgets that represent the underlying [`RenderObject`](https://api.flutter.dev/flutter/rendering/RenderObject-class.html), which computes and describes the geometry of the widget.

4.基础控件

Text、Row、Column、Stack、Container

Stack叠加布局，React中我们常常使用postion:fixed达到效果

Container：感觉类似div吧

Row/Column：类似css的flex

5.基础风格

MaterialApp、Cupertino

一般他们内置了很多功能，包含顶部导航条，路由机制

6.手势

GestureDetector，其他的事件都是这个的衍生品，例如onPress

7.控件相互作用

a.回调函数

b.状态值传递

8.一个控件可以接收若干个控件是一种重要思想

9.职责分离

两个无状态控件和一个父有状态控件可以做职责分离，以便于构建更加复杂的控件

Notice the creation of two new stateless widgets, cleanly separating the concerns of displaying the counter (CounterDisplay) and changing the counter (CounterIncrementor). Although the net result is the same as the previous example, the separation of responsibility allows greater complexity to be encapsulated in the individual widgets, while maintaining simplicity in the parent.

10.Diff比较依据

默认是通过类型和顺序，有key的话就是类型和key

React中列表循环组件我们需要为每个组件增加key,而Flutter也是类似的

By default, the framework matches widgets in the current and previous build according to their runtimeType and the order in which they appear. With keys, the framework requires that the two widgets have the same key as well as the same runtimeType.