外国网站邀请做编辑,广州做网站找酷爱网络,wordpress微信登陆插件,广州品牌设计公司排名前十强开源项目专题系列(八)1.开源项目名称#xff1a;magpie_fly2.github地址#xff1a;https://github.com/wuba/magpie_fly3.简介#xff1a;magpie_fly 是58集体出品组件库#xff0c;统一管理日常开发中的基础组件及高阶组件#xff0c;并提供了相对友好的方式介绍组件的具… 开源项目专题系列(八)1.开源项目名称magpie_fly2.github地址https://github.com/wuba/magpie_fly3.简介magpie_fly 是58集体出品组件库统一管理日常开发中的基础组件及高阶组件并提供了相对友好的方式介绍组件的具体使用方式。旨在降低日常开发中对组件的查找和学习成本实现技术组件的统一提升开发效率。全文大纲如下背景简介整体效果展示特点与优势实现方式现有组件list后期规划作者介绍背景相信很多公司都已经在研究flutter甚至已经把flutter运用到了自己的项目中它的流畅性热加载以及其丰富高效的UI表现力相信很多人都有体会。在开始magpie项目之前为了更多的了解flutter我们首先用安居客的有料界面做了尝试但是在开发有料界面的时候我们遇到了一些问题从上面的图中可以看出我们在现实开发中难免会遇到以下的问题flutter提供的组件不满足我们的开发需求我们需要自己封装或者使用第三方组件满足我们的开发需求。在不同平台上搜到很多相似组件的不同实现方式难以抉择。需要本地运行才能看见组件的真正样式因为作者介绍的效果图跟实际效果可能有偏差。需要把demo down下来之后才能找到组件效果实现的具体代码。没有符合我们集团内部统一风格的整套UI样式。写UI的同学重复造轮子。比如一个button的创建一个imageView的使用。magpie_fly要做什么我们希望统一组件管理以最友好的方式去介绍组件降低组件的查找和学习成本。所以我们需要一个组件库当然这个组件库是开放的我们希望更多的开发者将自己的组件贡献到组件库中。同一个集团下就应该要考虑体验一致性的问题所以我们希望像material-ui和fusion.design一样用flutter实现一整套统一UI风格的组件。聚集现有最优的高阶组件。我们希望通过设计图就能生成出对应的UI代码这样不但能解决UI图跟实际开发效果不一致性的问题同时能降低设计与开发的沟通成本解放了开发同学重复写UI代码的担子。目前我们只做了第一点剩下三个方面将是我们组件库后期开发的重点。整体效果展示58公众号动态显示58最新技术文章方便向外界宣传58技术widget库中管理的所有组件列表便于开发者进行查找组件详情组件介绍界面markdown效果代码的显示方式使用文档详细的描述了用源码的方式跑magpie_fly App的具体方法贡献流程详细的描述了我们应该怎么样去把自己写好的组件接入到组件库中特点与优势1、特点  集合所有日常开发中常用组件统一管理  文档、组件效果和代码同时显示  支持快速接入新的widget2、优势与Flutter-Go对比实现方式1、组件详情页 1.1 方案选择文档图片通常情况下都会想到用文本的方式去介绍一个组件的使用方式如果想要显示组件的样式基本都是通过嵌入图片或者gif的方式去显示一个组件的具体效果这样做的弊端是如果我修改了组件的样式就算只改了一点点我们都需要重新截图或者录gif动图。很显然这是很麻烦的。专门用widget实现一个完整的详情页开发者针对不同的组件自己去用widget实现一套自己的组件详情页但是我们这是一个组件库就希望统一详情页样式和风格所以让开发者自己实现自己的详情页是不可取的并且开发者自己全部开发一个详情页其实消耗的精力也是比较大的。文档组件效果代码我们希望在给开发者介绍组件的同时开发者能对组件进行操作增加开发者对组件的理解并且能直接看见实现该组件效果的对应代码方便开发者学习的同时还能一键复制到自己的工程中直接使用。这样大大降低了开发者的学习成本从而提高开发效率。于是我们借鉴了material-ui的思想实现了一套markdown widget效果(可以交互) 代码的方案。1.2 方案文档组件效果代码显示实现方式我们先来看下效果可以看出我们中间嵌入的组件是可以手动进行操作的而该组件是由下面的代码渲染出来的。那我们是怎么样实现这样的效果的呢虽然详情页看起来是由三部分组成实际上开发者只需要编写markdown文档并且在文档中添加我们规定的代码我们通过解析特定markdown文档的方式得到这样的效果。我们来看下需要嵌入组件的markdown的格式框出来的地方就是我们需要在.md中对应位置嵌入组件时的固定嵌入代码。我们会在解析markdown的时候专门对嵌入的代码进行处理。参数详解demo需要引入的样式的代码路径code默认true是否要展示widget对应的代码jump默认false在当前页面展示效果对应代码true则替换为占位符跳到二级页面展示我们拿到demo的value值从config.dart中得到对应的demo实例也就是自己组件的widget而正常的文档通过第三方库flutter_markdown转换成对应的flutter原生widget。于是整个markdown文档就全部转换成了多个widget组合的列表然后放到ListView中进行显示。那我们是怎么样把渲染组件的代码嵌入到markdown中的呢再来看下我们嵌入的代码{{demo: lib/demo/horizonal_scroll/HorizontalScrollDefault.dart, code: true}}这样我们就只需要修改代码效果和对应的代码都会同步展示出来。另外如果展示的效果是全屏的只需要加个jump:true的参数特殊代码就会解析成一个占位符点击跳转到二级页面展示效果点击右上角菜单即可查看对应的代码。代码关键字高亮展示方便阅读支持代码折叠、复制功能。2、快速接入组件既然是组件库就支持不断的往库中新增组件为了让开发者接入组件的时候更加简单方便我们提供了接入脚本脚本会根据输入的组件信息会自动在example/lib/demo文件创建一个组件模版接入方只需要修改自己组件相关的信息就能在界面中进行显示。具体设计参数详解.md文件组件详细描述markdown文件其中可插入组件效果的特定代码块需开发者自行编辑.dart文件对应组件的效果实现文件需提供组件的开发者自行实现相应效果.page.json根据执行脚本自动生成的组件信息文件供ListData读取显示在列表页中不需要开发者操作脚本主要做了两件个事情在example/lib/demo中生成对应组件的文件夹自动在ListDatas中加入需要在list中显示的组件然后在assets中配置自己的文件夹路径- lib/demo/test_wdiget/并且需要在util/config.dart中配置自己的demo数据lib/demo/test_widget/test_widget: () TestWidget(),至此就完成了一个简单的接入工作运行工程会在列表页看见加入的demo。现有组件list我们从安居客有料中提取了多个高阶组件下面我们来介绍下这些组件。1. video视频Feed流滚动探测播放插件我们经常会遇到这样的需求当视频滑动到列表的某一个位置时视频自动播放。甚至列表存在视频和其他帖子参差的数据这个时候我们就需要去动态的检测可视范围内符合条件的视频数据该组件就是在feed流中探测视频控件进行操作的插件。使用方式  1.1 使用ScrollDetectListener包裹ListViewListView为业务相关的视频流帖子。  1.2 视频帖子使用MetaConsumer包裹2. pinned_sliver 混合嵌套列列表中的吸顶安全区解决⽅方案在Flutter中使用AppBarLayout和SliverPersistentHeader都可以做出基本的吸顶效果。AppBarLayout内部使用的也是SliverPersistentHeader可以把它理解为一个Framework定制好的状态栏控件支持较多设置属性包括吸顶和float等。当吸顶遇到刘海屏时事情就会变得有些复杂一般来说我们希望  2.1 在没有吸顶前尽可能多的利用屏幕也就是需要使用沉浸式  2.2 当吸顶的时吸顶块需要在刘海之下也就是空出安全区而flutter本身的组件是不支持吸顶前后UI样式不一样的情况该组件就是为了解决这种情况诞生的。3. bannder_round 一个支持多种形式的高性能轮播组件滚播组件算是在日常开发中很常见的一种组件了该组件支持默认滚播图片和自定义滚播item样式可设置定时滚动等功能。4. horizonal_scroll 带尾部加载更多样式的横滑scrollview在日常开发中经常会遇到右滑加载更多的需求但是flutter提供的Scrollview是不提供底部加载更多效果的。为了减少开发时间提供了一个带阻尼回弹效果的横向加载更多组件底部加载更多可用自定义组件也可用组件内提供的默认样式和显示文字的样式。5. draggable_btn 一个跟随手指全屏拖动的按钮DraggableBtn是一个跟随手指全屏拖动的组件当手指按住时放大随着手指移动放开恢复原来大小停留在手指弹起的位置。可适用于悬浮广告位和debug时调试的悬浮按钮。6. popup_window 一个任意位置箭头跟踪View的弹层效果组件可指定上下左右方向弹出对应方向的弹层一般适用于弹出。后期规划希望更多开发者能积极的参与到我们的组件库中我们会不断丰富我们的内容使magpie_fly成为日常开发中必不可少的工具之一。作者介绍吴丹58同城二手车技术部-iOS高级开发工程师主要负责58同城App的二手车相关研发工作。金修博58同城商业智能中心-iOS高级开发工程师主要负责美事App的相关研发工作。李义新58安居客二手房经纪人Android高级开发工程师主要负责移动经纪人App的相关研发工作。Live58对外技术沙龙第五期Flutter专场——Flutter在58的应用实践系列话题系列2已准备就绪本周日晚7:00准时开幕扫码添加“58技术小秘书”微信 : jishu-58添加小秘书微信后由小秘书拉您进项目交流群END阅读推荐1. 详解站点压测利器——nGrinder2. 开源Magpie混合开发工程化框架3. Go服务在容器内CPU使用率异常问题排查手记4. 开源Magpie平台工具链开发实践5. 开源Magpie58跨平台技术应用及Flutter实践概览