Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI。
Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。
当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同,
以确定底层渲染树从一个状态转换到下一个状态所需的最小更改(译者语:类似于React/Vue中虚拟DOM的diff算法)。
在编写应用程序时,通常会创建新的widget,这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget,
具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数,用以构建自身。
一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget,
直到构建到最底层的子widget时,这些最低层的widget通常为RenderObject,它会计算并描述widget的几何形状。
widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
本示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心
weight 基础
Flutter有一套丰富、强大的基础widget,其中以下是很常用的:
####Text:
该 widget 可让创建一个带格式的文本。
####Row、 Column:
这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。
其设计是基于web开发中的Flexbox布局模型。
####Stack:
取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠,
你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。
Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的。
####Container:
Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration,
如 background、一个边框、或者一个阴影。 Container 也可以具有边距(margins)、填充(padding)
和应用于其大小的约束(constraints)。另外, Container可以使用矩阵在三维空间中对其进行变换。