Flutter,起飞

1、前言

最近看了几篇jetpack compose的文章,一脸蒙,不太能看懂,底下一堆评论说跟flutter很像,而且compose本身还没稳定版出来,目前都是beta版,同时Android Studio最新稳定版4.1.3也不支持compose,所以就找了之前很火的flutter来学习学习,据郭神大佬说,以后Android会去掉xml界面布局方式,或许跨平台的编程语言在未来会成为主流

2、开发准备

2.1 下载与配置

1,下载地址:点击下载,下载完成后,解压到指定目录,比如D:\flutter

2,配置环境变量,win + s 快捷键快速打开windows搜索栏,输入env,选择编辑系统环境变量,修改用户变量下的Path值,添加 D:\flutter\bin ,确定即可

在命令行中执行以下体检命令:

flutter doctor

在这里插入图片描述
如果显示上图错误的话,Ctrl C取消,重新执行一遍体检命令
在这里插入图片描述
检测完发现有个问题,需要修复,根据提示,继续执行命令:

flutter doctor --android-licenses

会有几个提示询问是否Accept,输入y即可,直到出现那All SDK packahe licenses accepted后,再次输入体检命令,会提示No issues found,至此配置完毕
在这里插入图片描述

2.2 插件安装

打开插件偏好设置 (位于 File > Settings > Plugins)

选择 Marketplace (扩展商店),选择 Flutter plugin 然后点击 Install (安装)。

当弹出重新启动提示时,点击 Restart。

3、开发初体验

3.1 设备检测

作为一名Android开发者,Android Studio和SDK都已安装完毕,执行以下命令来检测设备

flutter devices

可以看到,能检测到mobile和web设备
在这里插入图片描述

3.2 新建项目

File - New - New Flutter Project
在这里插入图片描述
选择Flutter Application,点击Next
在这里插入图片描述
输入名字和描述,选择Flutter SDK路径,点击Next,设置包名,点击Finish完成

在这里插入图片描述

3.3 运行项目

直接点击Run,试跑一下,首次编译可能会比较慢,大概十分钟,以下为Run日志

Launching lib\main.dart on Mi Note 3 in debug mode…
Running Gradle task ‘assembleDebug’…
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk…
Activating Dart DevTools…
Debug service listening on ws://127.0.0.1:54288/fZNrjqFSpEQ=/ws
Syncing files to device Mi Note 3…

在这里插入图片描述

3.4 调试模式

热重载,即使app在后台,也能热重载,前提是不要后台kill app

Performing hot reload…
Syncing files to device Mi Note 3…
Reloaded 1 of 548 libraries in 1,866ms.

看上图右上角,有个debug的标签,意味着这是在debug模式下,在更大的性能开销下实现了更快速的开发效率,比如可以使用热重载,同时如果app里有动画等效果实现的话,可能会变的卡顿,此时可以选择切换构建模式为profile或者release

4、实际案例

以下通过实现一个宫格列表的图片浏览及放大功能来学习flutter相关知识,话不多说,先看最终动态效果图,图片源于站长之家素材图片
在这里插入图片描述

通过本案例可以学习的知识点如下:

  1. list集合和实体类操作
  2. gridView、text等widget使用
  3. image实现圆角、加载本地assets、在线图片及填充方式和加载失败占位图
  4. widget点击、长按事件
  5. page页面跳转、跳转动画、传参、收参及回跳
  6. photo_view第三方库引用
  7. stack、column、container等多种组件和布局方式
  8. app名字和图标修改

代码参见github,学习参考编写第一个 Flutter 应用

<p><span style="color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 18px; font-variant-ligatures: common-ligatures; background-color: #ffffff;">Flutter 是最新一代的跨平台开发框架,目前我们使用 Flutter 来架构了产业链中的几款 APP,然后将一些开发实战经验给大家分享出来。</span></p> <p><span style="color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 18px; font-variant-ligatures: common-ligatures; background-color: #ffffff;">在 Android Studio 中,对 Flutter 项目,有了很好的扩展工具支持,本课程介绍使用包括 </span><span style="box-sizing: border-box; outline: 0px; font-weight: bold; overflow-wrap: break-word; color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 18px; font-variant-ligatures: common-ligatures; background-color: #ffffff;">Flutter Inspector</span><span style="color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 18px; font-variant-ligatures: common-ligatures; background-color: #ffffff;"> 代码定位工具、与Flutter Performance 内存性能调优工具、快速跟踪监测网络请求</span></p>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页