Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的

陈航 2019-07-09
你好,我是陈航。
在专栏的第一篇预习文章中,我和你一起搭建了 Flutter 的开发环境,并且通过自带的 hello_world 示例,和你演示了 Flutter 项目是如何运行在 Android 和 iOS 模拟器以及真机上的。
今天,我会通过 Android Studio 创建的 Flutter 应用模板,带你去了解 Flutter 的项目结构,分析 Flutter 工程与原生 Android 和 iOS 工程有哪些联系,体验一个有着基本功能的 Flutter 应用是如何运转的,从而加深你对构建 Flutter 应用的关键概念和技术的理解。
如果你现在还不熟悉 Dart 语言也不用担心,只要能够理解基本的编程概念(比如,类型、变量、函数和面向对象),并具备一定的前端基础(比如,了解 View 是什么、页面基本布局等基础知识),就可以和我一起完成今天的学习。而关于 Dart 语言基础概念的讲述、案例分析,我会在下一个模块和你展开。

计数器示例工程分析

首先,我们打开 Android Studio,创建一个 Flutter 工程应用 flutter_app。Flutter 会根据自带的应用模板,自动生成一个简单的计数器示例应用 Demo。我们先运行此示例,效果如下:
图 1 计数器示例运行效果
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(34)

  • 加温后的啤酒
    老师,想请教一个问题, 关于setState的。
    下面两种写法有什么本质的区别吗??两种写法都对吗?
    第一种:
    _counter++;
    setState(() {
    });
    第二种:
    setState(() {
      _counter++;
    });
    我用第一种方法运行,发现也没什么问题。。。也可以刷新UI

    作者回复: 没什么区别,事实上你把_counter++放后面也行。因为Flutter会在下一帧绘制的时候才刷新UI,并不是同步的

    2019-07-09
    15
  • 尛尛尛坏蛋
    Scaffold 快捷实现一个简单页面还是蛮好的,但是看Demo里面的用法,appBar body floatButton 三个是封装在一个层级里面的,也就是说改变了body里面的值,也顺带刷新了appBar 和 floatButton,感觉没这个必要,本身appBar和floatButton是加载一次后不用变化的。如果把Scaffold变成一个自定义的weight,可以把body再包一个层级,把数据源定义到body内部去,这样是否可行?

    作者回复: Widget只是数据的配置,并不负责最后渲染哈。Flutter会在中间收敛真正需要刷新界面的那部分Widget变化

    2019-07-09
    1
    7
  • 于留月
    以内联的方式完成了 Scaffold 页面元素的构建:

    首先,代码简洁,直观,容易阅读;
    其次,类似模板类代码,减少重复冗余代码编写;
    再就是现代语言的“语法糖”。

    作者回复: 是的,除此之外可以直接共享状态

    2019-07-09
    1
    6
  • 神经蛙
    关于“在_MyHomePageState类中,直接在build函数里内联的方式完成Scaffold页面元素的构建”,我有一个问题:
    前文提到“setState方法会通知Flutter更新界面,Flutter收到通知后,会执行Widget的build方法,重新构建”,那么如果在_MyHomePageState类的build函数里内联整个Scaffold页面元素构建,是否就意味着setState后整个Scaffold及其子节点都会重新构建?如果Scaffold的子节点很多,是不是就会带来性能损耗?

    作者回复: 理论上是

    2019-07-22
    1
    3
  • 大土豆
    我想问下,现在国内有没有比较成熟的纯flutter开发的App。

    作者回复: 开源的很多,比如知乎客户端,github客户端

    2019-07-09
    3
    3
  • 方海栋
    什么叫以内联的方式

    作者回复: 将函数体内语句直接插入并取代每一处调用该函数的地方(上下文)

    2019-08-04
    2
  • 啵一个草莓
    请教一个问题:我iOS真机运行一直报错,模拟器能成功,自己的个人apple ID(不是开发者) ,手机也是这个ID,不是可以在真机上运行么?

    作者回复: 可以参考下这篇文章的解决方案(打开iOS目录下的runner工程):https://blog.csdn.net/zhenggaoxing/article/details/79042382

    2019-08-09
    1
  • Miracle_
    老师请问下目前Flutter对各种不同屏幕尺寸适配有好的方案吗?

    作者回复: 32节会专门讲”如何适配不同分辨率的手机屏幕?“的

    2019-07-10
    1
  • 熊爸爸
    1. 老师在回复中多次提到的“共享状态”指的是什么,是 context 相关的能力吗?
    2. 希望老师能顺带讲讲代码和功能的封装等最佳实战(包括继承、Mixin);
    3. 3个月的时间感觉有点长,要是能加快更新进度就好了。不过还是要说:老师辛苦了!

    作者回复: 1.共享状态指的是能够共享变量。因为他们都在一个类中,所以不需要再传来传去了
    2.会讲的
    3.谢谢:)

    2019-07-10
    1
  • G
    老师,为什么要多一个createstate来创建State类呢,像react里面一样直接引用类不行吗?

    作者回复: 设计风格问题

    2019-07-10
    1
  • 信仰年轻
    没看出内联,,kotlin和C++的内联都有关键字inline,,这里哪里体现内联了啊??、

    作者回复: 对一个函数而言,内联指的是在不增加调用栈的情况下,在上下文把函数体直接展开;
    对我们这个例子而言,”以内联的方式“指的是把这些可以封装成函数/组件的代码直接在build函数体里展开

    2019-11-22
  • 奔跑的徐胖子
    老师,我有个疑问,既然flutter是从上至下的有自己的UI渲染的闭环,那么您说的,最终程序运行是以原生的方式进行的又是什么意思呢,flutter也是调用的原生功能进行功能实现吗

    作者回复: 是指Flutter程序的运行方式最终会打包成Android/iOS平台特定的格式:Android会把Flutter画布打包成FlutterView,iOS则会打包成FlutterViewController

    2019-10-29
    1
  • 雷声大
    想问下State 中的widget 是什么时候传过来的?莫非是框架设置的,我们new _MyHomePageState()的时候没有把 widget 传进来,但是State 里面就可以调用 widget.title

    作者回复: 你说对了,是StatefulElement设置的

    2019-10-04
  • 极客时间
    声名式ui与命令式ui能举个例子不 不太明白啥意思

    作者回复: 可以参考第十篇分享的内容

    2019-09-20
  • 🌙
    创建应用时提示无法打开kernel-service.dart.snapshot,怎么解决呢?

    作者回复: 可以看看这个issue的解决方案:https://github.com/flutter/flutter/issues/36114

    2019-08-13
  • 和小胖
    老师,我在那个main.dart这个文件里面打了断点,然后发现每次点击加号按钮时候,Scaffold 类里面的appBar之类的几乎都会走一遍,理论上来说不是只应该只走下面这段代码吗?
    Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                )
    难道是说只是走了,但是那些不需要的走的不重绘刷新吗?

    作者回复: 是的,Flutter底层会做收敛,只有真正需要重绘的才会做渲染。
    可以提前看下第9和第11节分享,里面有提到Widget的渲染过程,以及State的生命周期。

    2019-08-06
  • 晨鹤
    现在 Android 原生主推 MVVC 架构,也实现了数据驱动 UI,很爽。

    作者回复: 是啊

    2019-08-01
    1
  • 半桶水
    请教个问题,通过android studio进行调试,出现error connecting to the service protocol:HttpException:connection closed before full header was received。环境是ubuntu 19.04,flutter v1.7.8,Android studio 3.4.2

    作者回复: 试试 export NO_PROXY=127.0.0.1,localhost

    参考:https://github.com/flutter/flutter/issues/19056

    2019-07-19
    1
  • 晓磊
    找到小闪电图标了。但一直是灰色不可用状态。鼠标悬浮提示的快捷键是ctrl-\,按下去不起作用。真机调试。windows系统,AndroidStudio

    作者回复: 模拟器闪电可以用吗

    2019-07-17
    1
  • 晓磊
    老师,AndroidStudio上运行flutter上之后,找不到热重载按钮,就官网上说的那个带小闪电标识的,说的ctrl-s也不起做用,必须stop然后重新start。AS---Settings---Build,Execution,Deployment---Instant Run里的选项也尝试打开关闭,但未生效。
    2019-07-17
收起评论
34
返回
顶部