文章目录 1.Flutter生命周期 2.Flutter按键监听 3.总结 1.Flutter生命周期 我们先了解下生命周期的概念,也就是一个页面对象从创建到销毁的整个状态管理。我们看下Flutter的State生命周期的示意图: 可以看到我们的一个页面在加载创建时需要执行: 构造函数->initState->didChangeDependencies->build方法,然后才会渲染为一个页面。 当销毁关闭时: deactivate->dispose 内部的前后台页面状态变化主要有: enumAppLifecycleState{//...
文章目录 1.JSON编解码用法详解 2.JSON解编码优化 3.JSON自动序列化解码 4.总结 在实际开发中,经常使用到数据交换格式,如:JSON或XML。Flutter里也同样可以处理JSON格式的解析、编码操作,我们可以实现将一个JSON字符串转为实体类或将一个实体对象转为JSON格式字符串。本节博客主要讲解Flutter里的JSON编解码的具体用法,并结合案例进行详细的用法讲解。 1.JSON编解码用法详解 当我们去请求网络数据接口或者缓存某些结构数据时,一般都会用到JSON数据交换格式。JSON在移动端、后端、前端中应用都非常广泛。在Flut...
文章目录 1.用Flutter创建一个默认应用 2.用Flutter编写一个小Demo 3.总结 经过前面几节理论课程对Flutter的介绍,相信大家对Flutter有基础了解,也希望对Flutter的编程和应用开发产生了更加浓厚的兴趣。理论过后,估计大家正期待进入Flutter应用的编写实践。那么这节课就带领大家先尝试编写一个Flutter应用,感受一下Flutter开发的语法特点和运行效率。 Flutter应用运行起来比RN流畅、编译快、热加载快,所以开发和调试的效率非常高。本博客将着重给大家讲解下Flutter官方默认创建的应用,然后编写一个简单的Flut...
文章目录 1.Flutter的整体结构层级 2.Flutter的Widget分类 3.总结 Flutter的面向对象的编程方式,吸取了React的编程组件化思维。Flutter的所有类都可以看做是Widget,大部分的类都是继承自Widget类。所有学习和了解Flutter有哪些Widget、怎么分类的,对我们后续快速学习非常有用,也可以对Flutter的结构层级有一个大致的了解。 1.Flutter的整体结构层级 之前的章节介绍过Flutter的Framework的结构层级,再来回顾下这张图: 第一张是最新的详细结构图,第二张是比较早的更粗放的Flutte...
文章目录 1.基本布局 1.1Scaffold 1.2Container 1.3Center 2.线性布局 2.1Row 2.2Column 3.弹性布局 4.层叠布局 前面讲解了Flutter的几个基础组件,这节课将讲解跟布局相关的Widget。 每个平台的应用都有其自己的布局方式,例如Android有线性布局、相对布局、绝对布局、帧布局、表格布局等等,HTML前端也有自己的布局方式。Flutter当然也不例外。那么这节课就带领大家对Flutter的基础布局Widget中的几个典型的布局Widg...
文章目录 1.CustomScrollViewWidget 2.ListViewWidget 3.GridViewWidget 4.ScrollView 5.ExpansionPanelWidget 6.总结 1.CustomScrollViewWidget CustomScrollView是一个可以自己通过Flutter里的sliver来组装滚动Widget的一个控件,里面可以放置任何我们需要滚动的Widget,也是相对来说最常使用的一个滚动组件。 我们看下CustomScrollView的继承关系: CustomScrollView-&...
文章目录 1.Flutter文件操作 2.Flutter图片操作 3.总结 在实际开发中,经常离不开文件和图片的读写操作,例如缓存数据、创建删除文件/文件夹、读取文本/图片/音视频等数据、读取显示图片等等。Flutter也提供了相关的操作API。那么这节博客我们就开始学习Flutter中与文件和图片读写操作相关的内容,并结合案例进行用法讲解。 1.Flutter文件操作 常见的文件操作有:创建文件/文件夹、删除文件/文件夹、判断文件/文件夹是否存在、列出目录文件列表、文件读取写入、获取文件/文件夹信息等。Flutter也可以实现这些常用功能,使用的API主要就是...
文章目录 1.TabBar和TabBarViewWidget 2.BottomNavigationBarWidget 3.CupertinoTabBar和PageViewWidget 4.BottomAppBarWidget 5.总结 1.TabBar和TabBarViewWidget TabBar和TabBarView一般是搭配使用,TabBar用来实现Tab导航部分,TabBarView用来实现body内容区域部分。TabBar继承自StatefulWidget,是一个有状态组件。TabBarView同样也是继承自StatefulWidget。...
文章目录 1.FlowWidget 2.WrapWidget 3.总结 1.FlowWidget 流式布局可以用在商品标签列表、不规则瀑布流列表、网格布局的使用上。简单地说流式布局就是可以自动换行的布局,如我们一行里的控件放不下了,则自动绘制到下一行。 Flutter的Flow就可以自己自定义规则来控制子布局排列。Flow继承自MultiChildRenderObjectWidget,Flow性能比较好,绘制也比较灵活,可以定制布局效果。 Flow的构造方法如下: Flow({Keykey,//子布局排列配置规则@requiredthis.delegate,...
文章目录 1.TableWidget 2.DataTableWidget 3.PaginatedDataTableWidget 4.总结 1.TableWidget 我们先看下表格绘制的第一种实现组件:Table。Table的继承关系: Table->RenderObjectWidget->Widget Table中的每一行用TableRow组件,列数用columnWidths属性控制。 我们看下Table的构造方法: Table({Keykey,//每行的TableRow集合this.children=const<TableRow...
文章目录 1.Flutter路由基础 2.Navagator和Route基本用法详解 3.页面跳转及传递参数 4.总结 1.Flutter路由基础 在Flutter中路由也是主要用来处理页面跳转、页面数据传递等操作。Flutter的路由主要通过路由(Route)和导航器(Navigator)配合使用。Navigator主要负责路由页面的堆栈管理和操作,例如添加跳转页面、移除页面等。 在Flutter中路由用法主要有两种用法:一种是在MaterialApp里的routes参数里配置定义好路由列表,也就是提前定义好要跳转的页面和名称。 Map<St...
文章目录 1.WebSocket介绍 2.WebSocket简单用法 3.第三方插件库实现WebSocket WebSocket在我们平时开发推送、聊天、数据传输时经常使用,无论是Web端还是移动端。那么这节博客我们将介绍Flutter中WebSocket的基本使用:连接、发送消息、接收消息、断开连接。Flutter自身SDK带WebSocket功能,或者通过第三方插件库也可以实现这些功能,这两种实现方式都非常简单,本节博客会给大家讲解。 1.WebSocket介绍 在开始学习之前,先给大家简单介绍下WebSocket。我们应该对Socket和TCP、UDP协议...
文章目录 1.Flutter动画简单介绍 1.1Animation 1.2AnimationController 1.3CurvedAnimation 1.4Tween 2.基础动画效果的实现 3.Hero动画的实现 4.交错动画的实现 5.总结 动画部分在每个平台可以说都是一个常用的部分。如果想让自己的应用或产品的用户体验变得更好,那么动画效果是一个很重要的部分。 Flutter也提供了大部分的动画效果支持,如常用的渐变动画、位移动画、旋转动画等;特有的一个动画叫Hero动画,用来做页面跳转切换到动画效...
文章目录 1.实现应用国际化 2.使用插件库实现应用国际化 国际化就是让我们的应用支持多种语言,例如运行在国内的使用中文简体、在港澳台的使用繁体字、美国的使用英文、日本的用户显示的是日文等等类似场景,也可以把国际化称为本地化处理。Flutter本身的API是支持国际化处理的,当然也可以用官方提供的插件库来实现。 那么这节课我们将介绍Flutter中应用国际化处理的基本使用详解,并配合一些案例。 1.实现应用国际化 如果我们的应用想提供多种语言模式,那么就需要进行国际化处理,Flutter本身是支持国际化处理的。 在Flutter中使用国际化一般要配合MaterialAp...
文章目录 1.创建全局主题 2.局部主题 3.扩展或修改全局主题 主题这个概念可以大家都不陌生,我们在使用移动应用或者网页时候,都有夜间模式主题、护眼模式主题等等。在Flutter中主题的作用基本一致,可以设置全局或者局部的主题样式、字体样式,使得应用具有整体的样式风格。那么这节课我们将介绍Flutter中的主题内容,并配合一些案例。 1.创建全局主题 Flutter支持全局设置Theme主题,需要配合MaterialApp的theme属性进行设置。主题在Flutter中主要是通过ThemeData来实现配置。 我们看一个最简单的用法: ///创建全局主题...
文章目录 1.InheritedWidget实现数据共享与传递 2.ScopedModel实现数据共享与传递 3.Redux实现数据共享与传递 4.EventBus实现数据共享与传递 在使用Flutter开发的过程中,我们可能需要进行数据的页面之间的传递、共享或者全局的一个事件、状态管理和监听。那么这节博客我们将介绍Flutter中实现数据共享与传递的方法,并配合实例进行详细讲解。 1.InheritedWidget实现数据共享与传递 在Android中可以通过静态常量、全局对象来存储和共享数据,也就是全局变量概念。Flutter中则是以另外一种方式来实...
文章目录 1.知识整理 2.应用编写 2.1应用编写目标 2.2应用浏览 2.3应用分析 2.4应用实现 3.总结 经过前面两大部分的详细讲解,相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了很深入的了解,那么接下来我们就用前面学习的一些知识来进行一个实践:实现一个淘宝风格的商品展示列表,通过这个实例我们可以复习巩固我们之前学过的知识,也算是一个总结与检验。本课练习篇主要是将通过一些组件、自定义组件、常用布局等知识点来完成一个淘宝风格的商品展示列表,一起来学习吧,很简单! 1.知识整理 在进行案例编写前,我们先整...
文章目录 1.知识整理 2.项目实现 2.1效果展示 2.2项目概览 2.3代码实现 2.3.1引导页的实现 2.3.2应用首页 2.3.3第一个页面 2.3.4时间工具类 2.3.5个人中心 2.3.6数据库操作类 3.完整项目 1.知识整理 本篇练习看似简单,但是已经将应用编写的大部分需要用的功能都贯穿起来进行了实践、并提供了比较好的解决方案,将开发中可能会遇到的很多问题和难点进行了一一解决。 在进行综合实践编写前,我们先整理下我们这节课里用到的一些知识点: 引导页(Page...
文章目录 1.DartPub使用 2.Flutter插件库FlutterPackage的开发 3.Flutter插件库FlutterPlugin的开发 在使用Flutter开发时,可能某些功能的实现比较麻烦或者无法实现,这时我们首先应该想到的就是要搜索DartPub:https://pub.dev/flutter。 这是Flutter官方的一个针对Flutter、Web、Dart的插件库开源仓库,里面有很多官方和其他开发者开源的插件库。那么这节课我们将介绍Flutter中DartPub的使用,以及我们自己实现开发一款Flutter插件库的方法 1.DartPu...
文章目录 1.Flutter自定义Widget的方式 2Widget的继承实现自定义 3.Widget的组合实现自定义 4.CustomPaint绘制Widget 5.Flutter方法的封装 在使用Flutter开发的过程中,有时候现有的Widget不能满足需求,所以需要自定义Widget,有点像Android和iOS平台的自定义View,来实现我们的各种效果。Flutter也是支持自定义Widget组件的,原理和方法类似于其他平台。 1.Flutter自定义Widget的方式 当我们在实际开发中,可能Flutter的基础Widget组件并不能...