flutter加载依赖,flutter 加载更多
Flutter(六)Android与Flutter混合开发(Hybird)
如果我们目前的项目是Android的,但是接下来我们希望部分页面可以使用Flutter进行开发,甚至我们希望在Native页面中嵌入FlutterUI组件,那么我们该如何实现呢?
成都创新互联于2013年创立,是专业互联网技术服务公司,拥有项目网站设计、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元月湖做网站,已为上家服务,为月湖各地企业和个人服务,联系电话:18980820575
假设你现在Android项目的目录的结构是这样的
这时候如果你想创建一个Flutter模块,使得Android模块和Flutter模块之间可以进行交互,我们可以通过Android Studio新建一个Flutter Module,具体过程是:File — New — New Module ,之后选择Flutter Module,指定Project Location的路径为
也就是说,最终你的项目结构会是这样的
接下来在Android Module的 build.gradle 文件中添加flutter依赖
先创建一个Flutter页面
这里比较重要的是 window.defaultRouteName 这个字段,这个字段可以接收从Native传递过来的参数 (下文我们会介绍原生传递参数的方法),也就是说通过这个字段我们就可以进行Flutter页面的路由的分发
我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ,这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName
注意:需要在 AndroidManifest.xml 注册 FlutterActivity
自己创建一个 FlutterAppActivity 继承自 FlutterActivity
在 MainActivity 中启动 FlutterAppActivity (另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity )
两种启动方式的区别
如果单纯只是想打开一个Flutter页面,两种方式实际上基本没有太大区别,第一种方式也许还会更简单一点。但是,在Flutter开发中,我们往往还需要开发一些Native插件供Flutter调用,如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件,所以实际开发中一般推荐使用第二种方式
扩展思考
initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的,但是实际上他就是一个字符串,我们不仅仅可以传递一个路由名称,有时候我们也可以通过这个参数传递一串JSON数据,然后在Flutter端进行解析,这样我们就可以通过这个参数做更多的事情
activity_main.xml
FrameLayout 用于承载Flutter组件
MainActivity.java
使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中
运行结果
上半部分是原生的TextView,下半部分是Flutter的Text组件
本节主要介绍了Native和Flutter之间的页面跳转,以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互
第十六章:Flutter数据存储
Flutter的数据存储分为三类
Preference相当于iOS的NSUserDefaults,其实也是按plist的方式存储的
step1:添加依赖
step2:pub get
step3:导入头文件
在path_provider中有三个获取文件路径的方法:
- getTemporaryDirectory()
://获取应用缓存目录,等同iOS的NSTemporaryDirectory()和Android的getCacheDir() 方法。
- getApplicationDocumentsDirectory():
//获取应用文件目录类似于iOS的NSDocumentDirectory和Android上的 AppData目录。
step1:添加依赖
step2:pub get
step3:导入头文件
Flutter初探--常用依赖包
国外地址:
国内镜像:
以 flutter_screenutil 为例
路由框架 annotation_route
状态管理 provider
UI适配 flutter_screenutil
刷新控件 flutter_easyrefresh
网络请求 dio
toast控件 fluttertoast
图表库 charts_flutter
网络监听 connectivity
事件总线 event_bus
日历组件 table_calendar
官方webview webview_flutter
第三方webview flutter_webview_plugin
该篇文章为常用依赖包总结,用来记录所需要的常用依赖包,后续会不断扩充内容~
[Flutter Package]类iOS使用方法的SectionTableView
此控件的package我已经托管到了 pub仓库
如果你被墙住了,也可以看 国内镜像
使用方式就是在你的flutter pubspec.yaml中添加依赖:
然后flutter packages get更新依赖即可
最近写demo时发现Flutter自带的ListView widget很简陋,没有分隔线,没有section/row之分,也没有sectionHeader,如果要实现一个有分割线,有section区分,有section header的ListView,耦合会非常严重:
在 上没有找到封装好的这种TableView,于是乎决定自己写一个,命名为SectionTableView
本人是iOS开发,所以习惯了iOS上的UITableView的调用风格,所以在实现flutter的SectionTableView时,决定实现如下功能
为了实现这些功能,并且方便后期增加滚动功能,上下拉刷新功能,使用了StatefulWidget作为父类:
接着在对应的_SectionTableViewState中的build方法中,返回ListView:
熟悉flutter ListView的同学知道,ListView的builder类方法,有一个itemBuilder回调函数,参数是当前的上下文,和将要渲染的行索引index,index对应想要获取的某一行控件(cell或者叫ListItem),返回非空的组件就证明这个index有值,返回null就表示列表到尽头了。
我们需要做的就是对index进行映射,判断当前index对应的控件,应该是列表里的section header,还是分隔线devider,还是某一行的真正内容cell。
出于性能的考虑,不可能每次调用 _buildCell的时候,都计算一遍index对应的section和row的位置,所以定义了一个类成员变量indexPathSearch,是数组,数组长度就是ListView所有的行,当 _buildCell 的参数index大于等于indexPathSearch的长度的时候,就返回null,表示列表内容到此为止了。
indexPathSearch里每一个元素,就是index对应的section和row(称为indexPath),index指向实际行(cell)的时候,section和row都是大于等于0的,当section大于等于0,row==-1的时候,表示这里是一个section header,当两者都等于-1的时候,表示这里是一个分割线:
计算好了index到indexPath的映射,剩下的就好说了,在_buildCell中,提取indexPath并判断indexPath的内容,返回对应的控件:
这是我的第一个flutter package,目前还很简陋,flutter目前尚且如此,所以大家一起改善它,
下一步将优化如下内容:
如果大家喜欢,请多多star我的 项目GitHub
本文标题:flutter加载依赖,flutter 加载更多
当前链接:http://ybzwz.com/article/dscooec.html