苹果flutter组件,flutter macos app开发
Flutter:手把手教你使用滚动型列表组件:ListView
ListView的基础创建使用有三种方式:
为企业提供网站建设、成都网站建设、网站优化、全网整合营销推广、竞价托管、品牌运营等营销获客服务。成都创新互联拥有网络营销运营团队,以丰富的互联网营销经验助力企业精准获客,真正落地解决中小企业营销获客难题,做到“让获客更简单”。自创立至今,成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题,同时降低了营销成本,提高了有效客户转化率,获得了众多企业客户的高度认可!
通过默认构造函数来创建列表,应用场景 = 短列表
这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿。
长列表
列表子项之间需要分割线
ListView的进阶使用主要包括:下拉刷新 上拉加载
在Flutter中,ListView结合RefreshIndicator组件实现下拉刷新
通过包裹一层RefreshIndicator,自定义onRefresh回调方法实现
方式有两种:
通过ListView.controller属性可以判断ListView是否滑动到了底部,再进行上拉加载
NotificationListener是一个Widget,可监听子Widget发出的Notification
ListView在滑动时中会发出ScrollNotification类型的通知,可通过监听该通知得到ListView的滑动状态,判断是否滑动到了底部,从而进行上拉加载
NotificationListener有一个onNotification属性,定义了监听的回调方法,通过它来处理加载更多逻辑
不定期分享关于 安卓开发 的干货,追求 短、平、快 ,但 却不缺深度 。
Flutter组件(Widget)的局部刷新方式
Flutter中有两个常用的状态Widget分为StatefulWidget和StatelessWidget,分别为动态视图和静态视图,视图的更新需要调用StatefulWidget的setState方法,这会遍历调用子Widget的build方法。如果一个页面内容比较复杂时,会包含多个widget,如果直接调用setState,会遍历所有子Widget的build,这样会造成很多不必要的开销,所以非常有必要了解Flutter中局部刷新的方式:
globalkey唯一定义了某个element,它使你能够访问与element相关联的其他对象,例如buildContext、state等。应用场景:跨widget访问状态。
例如:可以通过key.currentState拿到它的状态对象,然后就可以调用其中的onPressed方法。
Flutter框架内部提供了一个非常小巧精致的组件,专门用于局部组件的刷新。适用于值改动的刷新。
实现原理:在 initState 中对传入的可监听对象进行监听,执行 _valueChanged 方法,_valueChanged 中进行了 setState 来触发当前状态的刷新。触发 build 方法,从而触发 widget.builder 回调,这样就实现了局部刷新。可以看到这里回调的 child 是组件传入的 child,所以直接使用,这就是对 child 的优化的根源。
可以看到 ValueListenableBuilder 实现局部刷新的本质,也是进行组件的抽离,让组件状态的改变框定在状态内部,并通过 builder 回调控制局部刷新,暴露给用户使用。
通过这个可以创建一个支持局部刷新的widget树,比如你可以在StatelessWidget里面刷新某个布局,但是不需要改变成StatefulWidget;也可以在StatefulWidget中使用做部分刷新而不需要刷新整个页面,这个刷新是不会调用Widget build(BuildContext context)刷新整个布局树的。
异步UI更新:
很多时候我们会依赖一些异步数据来动态更新UI,比如在打开一个页面时我们需要先从互联网上获取数据,在获取数据的过程中显示一个加载框,等获取到数据时我们再渲染页面;又比如我们想展示Stream(比如文件流、互联网数据接收流)的进度。当然StatefulWidget我们完全可以实现以上功能。但由于在实际开发中依赖异步数据更新UI的这种场景非常常见,并且当StatefulWidget中控件树较大时,更新一个属性导致整个树重建,消耗性能,因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。
通常情况下,子Widget无法单独感知父Widget的变化,当父state变化时,通过其build重建所有子widget;
InheriteddWidget可以避免这种全局创建,实现局部子Widget更新。InheritedWidget提供了一种在Widget树中从上到下传递、共享数据的方式。Flutter SDK正是通过InheritedWidget来共享应用主题和Locale等信息。
InheritedWidgetData
TestData
InheritedTest1Page
provider是Google I/O 2019大会上宣布的现在官方推荐的管理方式,而ChangeNotifierProvider可以说是Provider的一种:
yaml文件需要引入provider: ^3.1.0
顶层嵌套ChangeNotifierProvider
创建共享数据类DataInfo:
数据类需要with ChangeNotifier 以使用 notifyListeners()函数通知监听者更新界面。
使用Provider.of(context)获取DataInfo
nextPage:
使用Consumer包住需要使用共享数据的Widget
RepaintBoundary就是重绘边界,用于重绘时独立于父视图。页面需要更新的页面结构可以用 RepaintBoundary组件嵌套,flutter 会将包含的组件独立出一层"画布",去绘制。官方很多组件 外层也包了层 RepaintBoundary 标签。如果你的自定义view比较复杂,应该尽可能的避免重绘。
以上总结了几种Flutter的局部刷新的方式,可根据实际需要使用不同的方式,最适合的才是最好的。
3. Flutter - 基础组件 之 Text
Text继承自 StatelessWidget ,Text 主要通过设置 文本布局 及 文本样式 控制显示方式。
1. 文本布局: 例如文本对齐方式 textAlign 、文本排版方向 textDirection ,文本显示最大行数 maxLines 、文本截断规则 overflow 等等
2 文本样式: 如字体名称 fontFamily 、字体大小 fontSize 、文本颜色 color 、文本阴影 shadows 等等,这些参数被统一封装到了构造函数中的参数 style(TextStyle) 中
在iOS中,我们可以使用NSAttributedString进行富文本设置。在Flutter中 我们可以通过 Text.rich() 或 RichText() 进行富文本设置。
两者均为 InlineSpan 类型, InlineSpan 为抽象类。
抽象类不能直接实例化。Flutter已为我们提供了
且 WidgetSpan 继承自 PlaceholderSpan
Flutter自定义绘制组件
Flutter中自定义组件一般有两种方式:
CustomPaint继承自SingleChildRenderObjectWidget,即它可以在通过嵌套引入到widget树中,并且可以有一个child子widget。它的构造方法如下:
painter和foregroundPainter需要接收CustomPainter对象,是CustomPaint核心。CustomPainter是进行UI绘制的核心类,绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。
size属性标识绘制区域大小,但当CustomPaint有child,该属性将会忽略,而使用child的大小为绘制区域大小。
isComplex和willChange用于控制绘制层缓存处理的,这里暂不讨论。
可实现CustomPainter子类进行UI绘制
实现paint方法进行真正的绘制,canvas是画布对象,size是绘制区域,是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似,连API都十分相像,这点对熟悉Android原生开发者真是太友好了。
Paint对象是画笔对象,就是绘图工具,我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等,通过这些属性我们可以很方便的来定制自己的UI效果,在绘制的过程中可以定义多个画笔,以便实现多种风格图形的集合。
根据需求选择合适的画笔属性,完成你的绘制。
Canvas是绘制的画布,它包含了很多绘制方法,可以绘制出各种形状的图形。需要注意的是,画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的,每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。
下面介绍下Canvas的绘制方法:
PointMode是个枚举
p1、p2为线段两个端点
Rect定义矩形的大小位置,有多种构造方式:
RRect描述圆角矩形,他通过Rect和Radius来构造
画圆比较简单,c表示圆心位置,radius是半径。
椭圆使用外接矩形确定大小位置,rect就是外接矩形。
绘制弧形,先确定弧形对应的椭圆,同样地用外接矩形rect确定椭圆,然后根据起始点和结束点角度来确定那一段弧度,startAngle,sweepAngle分别代表起始和结束点角度,角度用弧度表示法。
useCenter表示是否连接闭合形状,userCenter = false表示不闭合,即画一段弧线,userCenter = true表示闭合,即绘制一个扇形。
绘制路径,关键在于构建路径Path,可以直接new Path对象,然后通过path方法可以连接出图形,path关键方法如下:
还有其他方法,有兴趣可以查看API。
ios flutter 混编
最近在集成flutter进项目
以收集编译产物并以cocopods方式集成
产物大概放入两个pod库
这个暂且叫pod1,pod1放flutter.framework,第三方plugin.a,自己写的基础plugin,比如networking,hud等等(由于是混编,不可避免存在很多原生基础组件,所以能公用的基础组件都会弄一个flutter-plugin桥接)
第二个pod2放编译之后的app.framwork,注册文件GeneratedPluginRegistrant,以及各个业务模块.a(有可能没有)结构大概如下面
podspec大概如下
主工程引入这两个pod库即可
接下来从零开始搭建上文所说的
先创建一个flutter module
这个是主flutter工程,用来集成businessModule以及生成app.framework
结构如下图
再生成一个业务工程
注意此时还需要进入example生成ios和Android工程,不然无法单独编译运行
这样 这个单独的业务模块就可以单独跑起来了
此时主flutter工程和业务工程均搭建完毕
在主工程pubspec.ymal文件讲两个工程关联
好了 接下来就是编写脚本收集产物了
编译完成之后会在flutter主工程product生成如下文件
将上面文件分类收集做成文章开头的pod1,pod2 ,在native工程引入即可
在集成flutter的过程中 踩不少坑 也阅读很多前辈的文章,在此一并感谢
新闻标题:苹果flutter组件,flutter macos app开发
文章链接:http://pwwzsj.com/article/dsipjss.html