Flutter学习-07- Flutter学习之认识FlutterApp

1.关于Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 Flutter由于其自建渲染引擎，贴近原生的实现方式，获得了优秀的渲染性能。

快速创建一个flutter项目了解一下。

main.dart 相当于我们app的入口，iOS中的main.m是程序的入口

我们运行hello_flutter项目，android模拟器上运行

在iPhone模拟器上运行

在web端运行

做到了一份代码应用了3个端，大大的提高了效率。

2. 自定义widget

在flutter中万物皆可widget类似我们iOS中面向对象。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

我们在修改内容后可以点击⚡️或者在Mac上快捷键command+/。可以快速查看变化，大大提高了我们编译时间。 这里系统homepage是自定义widget，我们自己自定义一个widget

2.1 widget的状态

这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget， 具体的选择取决于您的widget是否需要管理一些状态。

• StatelessWidget :无状态不改变的，通常我们可以使用快捷键stl

• StatefulWidget: 有状态可以改变的，通常我们可以使用快捷键stf

2.2 自定义Widge

自定义一个text文本类似我们iOS中label，设置了文字因为是center的widget所以居中显示。

我们设置text的样式，字体大小，颜色以及加粗展示。我们也可以把这个抽出来，方便其他widget使用相同的style。

3. MaterialApp

Flutter提供了许多widgets，可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialApp widget开始， 该widget在应用程序的根部创建了一些有用的widget，其中包括一个Navigator， 它管理由字符串标识的Widget栈（即页面路由栈）。Navigator可以让您的应用程序在页面之间的平滑的过渡。

3.1 MaterialApp

我们先自己创建一个自定义的MaterialApp

我们可以直接使用=>直接返回runApp(),文字下会显示2道杠，上面有个debug。在MaterialApp这个widget中默认会有一个 debugShowCheckedModeBanner默认是ture，我们设置false就没有了

3.2 scaffold

一般来说MaterialApp 会配合scaffold来使用，scaffold是脚手架的意思

类似我们iOS导航控制器，上面是导航栏，中间是body也就是内容，这里简单的了解下。

4. ListView

ListView 和我iOS中的tableView类似，是我们使用频率比较高的控件。一般会搭配数组list来使用。

4.1 模型数组

我们这里定义模型Car，属性name和imageUrl使用final修饰，表示只能修改一次。我们初始化的时候使用const 修饰表示静态变量。

我们把这个model和数据抽出来，放到一个model模型中

4.2 listView

我们在创建一个ListView的Widget，其中itemBuilder类似我们iOS中的cell，我们也可以把它抽出来，返回一个Text，其中文字就是我们之前car_model中的数据，item Count就是行数。

• 小技巧 我们不用手动导入car_model 如果你不想每次创建类都导入文件，那么我们可以直接根据提示创建对象。将类名输入，然后AS就不需要你手动import了。 如果你有一个文件的import被删除了或者没导入，直接对报错的类名称使用option + Enter搞定导入的动作。
• 显示图片 我们使用Container，相当于我们iOS中的view，使用image加载网络图片，我们设置背景色和内间距。
• 组合使用

• 调整下间距，并添加文字的样式

一个简单的listView就展示出来了。