Flutter学习一 :初识Flutter

中文网:Flutter中文网

一、环境:

我使用的android stuido 

1.下载插件:

2.下载Flutter Sdk

GitHub上搜Flutter 下载

SDK路径就是:D:\flutterSdk\flutter

3.studio直接创建Flutter项目就可以。Android studio导入别的flutter项目,直接open打开,不要import。

二、语言及相关Api

1.Dart语言(不懂Dart的最好找个文档学习下,因为和Java不一样,按java逻辑写会有坑、我也是在摸索学习~)

2.秉承Dart语言特点,真正的面向对象编程,万物皆对象,所有的数据都是对象。不论什么控件、方法。

3.每个ui widget 分为 StatelessWidget 和 StatefulWidget 。Flutter框架将依次构建这些widget,直到构建到最底层的子widget时,这些最低层的widget通常为“RenderObject”,它会计算并描述widget的几何形状。StatelessWidget :状态不变  , StatefulWidget :状态变(即会更新)

4.UI变化时, 必须执行方法setState(){}。StatefulWidget  必须 实现一个单独的State<>类。

5.初学flutter,总无法清楚每个控件的作用是啥,有时定义widget 会:new MaterialApp();有时是:new Scaffold();

    MaterialApp  : 为了继承主题数据,widget需要位于MaterialApp内才能正常显示, 因此我们使用MaterialApp来运行该应用,主要是各个Material风格控件的类。

其包括:Scaffold,Navigator,MaterialPageRoute,WidgetsApp。

从红框中可知:

Scaffold:主要用于appBar和Drawer的创建。

WidgertsApp:封装应用程序通常需要的许多小部件的便利类。WidgetsApp提供的主要角色之一是将系统back按钮绑定到弹出导航器或退出应用程序。

Navigator:是用于管理每个页面的堆栈类。

MaterialPageRoute:大意指用于定义每个页面相关Material,即 阴影,主题颜色,等视觉效果(具体未看)

6.widget常用基础类型树:

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可以使用矩阵在三维空间中对其进行变换。