猿人部落 › 主页 › 资讯 › 查看内容

一个小白的Flutter从入门到进阶学习之路

2019-7-29 19:18 发布者: admin 评论 0 查看 1157

我在IT行业已经晚了将近四年，但这条道路并不孤单。我非常感谢领导我前进的每一位领导。我仍然清楚地记得李功对我说的话。这段代码中有一个多余的字母吗？虽然这个目标很难实现，但我相信目标将越来越近。正如我常说 ...

前言

我在IT行业已经晚了将近四年，但这条道路并不孤单。我非常感谢领导我前进的每一位领导。我仍然清楚地记得李功对我说的话。这段代码中有一个多余的字母吗？虽然这个目标很难实现，但我相信目标将越来越近。正如我常说的那样，“我们每天都在好转。”

回到主题，Flutter官方介绍“Flutter是Google的移动UI框架，在iOS和Android上快速构建高质量的原生用户界面.Flutter适用于现有代码。在全世界范围内，Flutter正在使用越来越多的开发者和组织，Flutter完全免费和开源。“Flutter 1.0版于2018年12月5日（北京时间）发布。

在2019年初，我收到了领导层的通知，“新项目需要与Flutter一起开发”，总之，步入Flutter当时，我只是想到了一套Flutter代码同时实现了Android和iOS应用程序的开发，从而降低了项目的开发成本。后来，我觉得不止于此。

我主要从事Android开发，一直参与Java项目的开发，C ++项目。如果您对我有类似的经历，那么阅读本文是毫不费力的。

第一步：dart语言

Flutter开发依赖于dart语言，我是Java语言，学习dart语言并不困难，可以说它很容易启动。个人觉得你需要注意以下几点：

- dart语言是面向对象的编程，即使它是一种方法，也可以理解为一个对象。

- 类型定义：var，var可以定义任何类型，应该注意的是，一旦分配了var，就会确定类型。

- 变量的默认值为null，int i; //现在我==null。

- 数据类型包含int和double＃nbsp;

- 字符串格式，通常使用运营商'$'＃nbsp;

- 新关键字可以省略＃nbsp;＃nbsp; - 变量和方法以下划线_开头，默认为私有

- 泛型类似于Java中的泛型

- 方法的参数是可选的，符号[]，{}

- 异步编程，使用Future然后

- Collection：List，Map，Set

第2步：Android Studio Flutter配置

1。安装Flutter SDK，＃nbsp;

2。将flutter \ bin添加到环境变量中，运行flutter doctor＃nbsp;

3。 Android Studio配置Flutter插件，在Setting-＆gt; Plugins中安装Flutter和dart，然后重启Android Studio。

4。 File-＆gt; New-＆gt; New Flutter Project＃nbsp;

步骤3：Flutter功能

1。热过载，按ctrl + s保存，更改将生效。在特殊情况下，如果不起作用，则需要单击“闪电图标”以实现重载，这非常方便。

2。小部件概念，你在UI上看到的所有屏幕都是小部件，对于页面来说很大，小按钮是各种小部件。这需要发声，Widget太过分了。对于刚刚入门的开发人员来说，这确实是一个挑战。存在单节点布局，容器布局，行和列布局，流布局等，而不是例如。当然，用户可以自定义布局以实现自己的需求。

3。数据绑定到UI，修改数据后，屏幕会自动刷新。还有一些坑，因为Flutter的缓存机制并不一定能刷新图片。

4。与本机交互，Flutter是UI框架，有些功能无法完成，例如获取电力。

第四步：编写第一个Flutter程序

1. Flutter的入口：lib/main.dart

2. UI布局及控件

UI布局是一层一层嵌套的，上图包含了一个AppBar和Body，即是标题栏和页面。

Flutter的布局是非常多的，包含MaterialApp、Scaffold、Container、Column、Row、Text、TextField、RichText、FlatButton、Wrap、CustomScrollView、ListView、CircleAvatar、Image、Icon...，wow，太多了。

3. Stateless和Stateful

Stateless是静态的，其中的Body等Widget一旦被渲染后，不会再发生改变，一般用于显示静态页面。

Stateful是可以改变的Widget，Widget会随着状态改变而改变，用的比较多的是setState()方法，重新渲染Widget。

4. 目录结构