![](https://img-blog.csdnimg.cn/20200529151120332.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
跨平台开发
有关跨平台开发的文章
萧文翰
高级测试开发工程师;
著图书《Flutter从0基础到App上线》、《打造流畅的Android App》、《深入浅出Android Jetpack》、《Go语言从入门到项目实战》;
著课程《零基础通关Go语言》、《Flutter跨平台开发实战》。
展开
-
Flutter如何有效地退出程序
今天博主来谈一个开发Flutter App的小技巧——怎样有效地退出程序。这种方法典型的应用场景就是用户许可协议的同意与否。从用户的角度讲,虽然大部分人都会无脑点击“同意”,但我们仍不应忽视“不同意”的作用——退出App。笔者在网络上搜索了一下相关的API,发现大部分的文章都在推荐一种方法,即:SystemNavigator.pop();但该方法在iOS中并不适用。实际上,这种方法将会通知原生代码,请求原生代码退出App。换句话说,如果在原生层面并没有退出App的操作,就会报错。报错的示例如下:原创 2020-08-20 11:47:26 · 1631 阅读 · 0 评论 -
用Flutter做桌上弹球?聊聊绘图(Canvas&CustomPaint)API
本文是Flutter中Canvas和CustomPaint API的使用实例。首先看一下我们要实现的效果:结合动图演示,列出最终目标如下:在程序运行后,显示一个小球;每次程序启动后,小球的样式均发生随机性变化,体现在大小、颜色和位置三点;小球运行的规律参考桌球或三维弹球游戏;单击屏幕,小球变色;双击屏幕,小球暂停/恢复运动;长按屏幕,小球开始/停止自动变色。运用的主要技术点:Canvas和CustomPaint API。运行平台:Android、iOS源码地址:Github原创 2020-07-30 15:23:31 · 548 阅读 · 0 评论 -
一切皆组件的Flutter,安能辨我是雄雌
从一开始接触Flutter,相信读者都会铭记一句话,那就是——一切皆组件。今天我们就来体会一下这句话的神奇魔力,我们先从实际的产品需求说起。我们先来看一个简化的运行图:我们要实现如上图所示的日期选择器,App是iOS风格。Flutter SDK自身有类似上图的日期选择器,但是Material Design的,于是我到Flutter库中找到了一个名为flutter_date_pickers的三方库,版本为0.1.4(https://pub.flutter-io.cn/packages/flutter_原创 2020-07-27 13:16:39 · 594 阅读 · 1 评论 -
大前端时代搞定PC/Mac端开发,我有绝招
如果你是一位前端开发工程师,对“跨平台”一词应该不会感到陌生。像常见的前端框架:比如React、Vue、Angular,它们可以做网页端,也可以做移动端,但很少能做到跨PC、Mac端,也就是我们熟知的Windows、Linux以及macOS上的应用程序。即使有,受限于JS的性能瓶颈,当有大量的科学计算需求时,则会略显疲态。有没有一个理想的UI框架能够通杀它们所有呢?答案是——Flutter。Flutter的性能优势做为一个通用的跨平台的UI框架,Flutter在性能方面的突出表现是非常引人夺目的。拿A原创 2020-07-11 09:58:28 · 694 阅读 · 0 评论 -
Flutter中动态显示组件之“坑”,我来教你怎样爬上来。
Flutter中动态显示组件之“坑”,我来教你怎样爬上来。原创 2020-07-10 16:58:19 · 863 阅读 · 0 评论 -
Flutter 自定义组件实战
Flutter 自定义组件实战原创 2020-07-10 16:57:42 · 465 阅读 · 0 评论 -
Flutter 中神奇的 AbsorbPointer 组件
Flutter 中神奇的 AbsorbPointer 组件原创 2020-07-10 16:55:20 · 351 阅读 · 0 评论 -
Flutter 自定义组件实战之Cupertino(iOS)风格的复选框
继上一篇Flutter自定义组件的视频短课(视频地址: https://www.bilibili.com/video/BV1ap4y1U7UB/ )后,我们继续来聊自定义组件。视频中我为大家详解了Cupertino风格的单选框的实现,这次我们就说说Cupertino风格的复选框。我们先来看看效果:如上两图所示,第一张图是未选中的状态,第二张图是勾选后的状态,在点击时有点击效果。为了方便大家看出效果,我特意放大了组件大小。其实很简单,整个组件就是Container和Icon组成的。Container是原创 2020-07-05 13:58:59 · 891 阅读 · 0 评论 -
在Flutter中使用SetState无效?可能是忽略了这个!
这次是Flutter开发技术分享,解决的问题点来自本人实际的开发经历。首先描述一下问题:在某个组件中调用setState()方法更新该组件状态,结果是无法做到更新效果,组件仍然维持原状。下面我们用代码示例还原问题场景:class _MyHomePageState extends State<MyHomePage> { bool isChecked = false; showTestDialog() { showDialog( context: context,原创 2020-06-20 10:45:13 · 4453 阅读 · 0 评论 -
Flutter 中由 BuildContext 引发的血案
今天和各位分享一个博主在实际开发中遇到的问题,以及解决方法。废话不多说,我们先来看需求:我们要做一个iOS风格的底部菜单弹出组件,具体涉及showCupertinoModalPopup()方法,该方法被执行后,会出现如下图类似所示的菜单弹出视图:相信这个弹出菜单视图都有见过吧?下面重点来了:在本次的项目需求中,该视图的选项文字是由Server端返回的。也就是说,这些选项的内容和个数都不固定,因此不能将其在代码中写固定值。为了简化代码以突出重点,下面放上我在一开始的实现方案: openAction原创 2020-06-13 10:29:04 · 781 阅读 · 0 评论 -
Flutter 中 GestureDetector 的使用误区
在实际开发中,我们通常需要实现某个组件的更多点击事件。比如:原生的RaisedButton组件是无法响应诸如拖拽或是按下、抬起等细化的动作,它只有一个onPressed()方法来表示。当我们想实现这些细化事件时,通常使用的组件是GestureDetector。我们先来看下面这段代码:GestureDetector( onTap: () { debugPrint("RaisedButton点击阻断"); }, child: RaisedButton( chi原创 2020-06-09 13:18:03 · 692 阅读 · 0 评论 -
借Adobe XD之力,自动生成Flutter代码
概述今天,我们来聊聊一个专门为“懒人程序员”准备的工具——Adobe XD。使用它可以快速将原型设计图转换为可执行的Flutter代码, 而由于Flutter自身跨平台的特性,因此这些自动生成的代码即可以用在Android、iOS这样的移动设备上,也可以用在Web页中。认识Adobe XD首先我们来看看Adobe XD是什么,以下内容摘自百度百科:Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是一款结合设计与建立原型功能,并同时提供工业原创 2020-05-29 15:09:49 · 2174 阅读 · 0 评论 -
搭建React Native环境的几个Tips
博主最近在研究跨平台开发,打算好好研究一下React Native这个比较被大家熟知的玩意。 昨天进行了环境搭建和初步的学习,感觉上手还算快。在这里,把一些已经发现的坑,提前告诉给各位,希望能让读者们少走一些弯路。 首先说一下无论是Mac,Windows,还是Linux,如果有能力,请直接去英文官网查看文档,不要看中文官网,真的有坑,稍候细说。 我的环境,Mac,Windows都有,先说Win原创 2016-11-08 08:09:47 · 644 阅读 · 0 评论