自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

吉原拉面

萌新~~又萌又新!!

  • 博客(26)
  • 收藏
  • 关注

原创 一款Flutter伪自定义BottomAppBar

https://github.com/yumi0629/FlutterUI/tree/master/lib/bottomappbar  使用Flutter原生的FloatingActionButton+BottomAppBar实现,配合Scaffold使用更舒服,适合不喜欢自己用Widget组合自定义BottomAppBar的小伙伴。  实现思路为:1、自定义floatingActio...

2019-07-25 11:06:03 891

原创 Flutter WebView与JS交互简易指南

本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter  WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会。  开始之前先简单了解一下官方WebVi...

2019-04-02 10:47:33 3114

原创 用Flutter实现一个涂鸦和加水印功能

本文涉及的知识点:截图、图片保存、根据用户手势实时绘制canvas。GitHub地址:https://github.com/yumi0629/FlutterUI/tree/master/lib/scrawl先上效果图:  需求分析  这次的想法是移植自项目中的一个小功能:截屏当前页面,添加涂鸦功能后,分享给第三方APP。分享功能我们暂不讨论,使用插件可以轻松完成,重...

2018-11-23 12:14:34 2949 1

原创 用Flutter实现一个仿Twitter的点赞效果

  这次依然是补作业,之前在写仿“探探”左滑/右滑的效果的时候,设计稿底部的喜欢Icon其实是有类似于Twitter点赞那种的动效的,但是因为时间原因我偷懒没写。  惯例先上效果图:   GitHub地址:https://github.com/yumi0629/FlutterUI/tree/master/lib/likebutton  整体算法是参照了GitHub上star最多的...

2018-11-17 22:27:54 1957

原创 Flutter:教你用CustomPaint画一个自定义的CircleProgressBar

  注意:这其实是一篇CustomPaint的使用教程!!       源码地址:https://github.com/yumi0629/FlutterUI/tree/master/lib/circleprogressbar  在Flutter中,CustomPaint就像是Android中的Paint一样,可以用它绘制出各种各样的自定义图形。确实,Paint的使用比较复杂,我觉得直接讲A...

2018-11-03 16:12:55 7326

原创 用Flutter实现一个仿“探探”的左右滑动选择喜欢/不喜欢的效果

  写在前面,效果已经基本OK了,但是有些细节还没处理好。暂时主要有三个问题:用户手势到达屏幕边缘时释放,如果旋转角度过小,动画总感觉有些不流畅(也可能是我的错觉吧); 给数据刷新提供的API还没想好,现在塞数据比较麻烦; 因为UI设计是根据用户手势移动布局位置的,因此用户每次手势位置改变,都需要刷新布局,现在是用setState的方式去刷新的,不清楚在布局复杂的情况下是否会有性能问题。...

2018-10-25 17:47:24 4005

原创 Flutter:Slivers大家族,让滑动视图的组合变得很简单!

文中所有示例代码请点击:https://gitee.com/yumi0629/FlutterUI/tree/master/lib/sliver  今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法。开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌套布局。  比如之前讲Hero的时候提到的下面这个...

2018-10-23 13:44:05 18549 3

原创 谈一谈Flutter中的共享元素动画Hero

  如果你是一名安卓开发者,应该很熟悉 共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动画。  Google把这个概念也带到了Flutter里面,这就是我们今天要讲的主角——Hero控件。通过Hero,我们可以在两个路由之间,做出流畅的转场动画。注意,是两个路由(Route),在Flu...

2018-10-19 09:57:26 3793 2

原创 Flutter:手把手教你实现一个仿QQ侧滑菜单的功能

  一个类似于QQ侧滑菜单的功能,支持从上、下、左、右四个方法打开菜单栏。可以通过自定义transform实现更加炫酷的动效!  先上效果图:slide from left.gifslide from right.gifslide from top.gifGithub地址:https://github.com/yumi0629/SlideDrawer使用方法:...

2018-10-16 10:55:38 3006

原创 Flutter中如何判断当前运行模式是Debug还是Product?

  说这个之前,我们先来回顾一下 Flutter的四种运行模式:Debug、Release、Profile和test ,在实际开发中,我们往往需要根据当前运行模式的不同,选择不同的操作,比如在Debug模式启用Log、在生产模式关闭Log。  如果你是一名Android开发者,肯定对于这个不陌生,在Android中,有一个根据gradle配置自动生成的BuildConfig类来判断当前的运行模式...

2018-10-11 09:49:34 9658

原创 解析Flutter中的手势控制Gestures

  Flutter提供了很多处理触摸事件的控件,例如InkWell和InkResponse可以处理点击、双击、长按等事件,将它们包裹在需要响应触摸事件的控件外部就可以了,而且InkWell和InkResponse还会添加一个水波纹的点击效果,InkResponse还可以设置水波纹的形状。但是,InkWell和InkResponse都不会做任何的渲染工作,它们只是更新了父级Material Widg...

2018-09-27 14:48:44 4797 1

原创 Flutter:在widget tests中调用Image.network()控件crash?

原文地址:Testing tidbit #2 - Why does using Image.network crash widget tests?  在没有真机和模拟器的时候,使用widget tests来测试是很有用的。而且test中的自动点击、滑动等的模拟,可以为你节省很多时间,因为等App运行起来,你可能需要盯着屏幕上的Waiting for emulator to start...好几...

2018-09-26 17:18:12 2803

原创 这可能是最早的RxDart使用入门教程。。。

原文地址:RxDart: Magical transformations of Streams(国际惯例,英文好的请去看原文,我的翻译可能会省去一些东西,同时加入一些自己的想法,便于自己理解。与其说是一篇翻译,不如说是一份自己的学习笔记。)  在这篇文章中,我们将来谈一谈如何使用RxDart对Streams进行各种神奇对变换,我会重点介绍RxDart中的常用函数,同时讲解对应的App。  ...

2018-09-19 17:59:14 6710 3

原创 Flutter中如何利用StreamBuilder和BLoC来控制Widget状态

参考文章:Reactive Programming - Streams - BLoC(为了便于阅读,略去了原文中的一些跟StreamBuilder和Bloc无关的拓展概念,比如RxDart、Demo的解释等,想要进一步了解的可以移步原文。)先粗略讲点关于Stream的东西  Stream其实类似于Rx大家族,也是一种对于数据流的订阅管理。Stream可以接受任何类型的数据,值、事件、对象...

2018-09-18 16:19:11 8699 1

原创 Flutter更新showDialog中的内容

    很多人在用showDialog的时候应该都遇到过这个问题,使用showDialog后,通过setState()无法更新当前dialog。其实原因很简单,因为dialog其实是另一个页面,准确地来说是另一个路由,因为dialog的关闭也是通过navigator来pop的,所以它的地位跟你当前主页面一样。这个概念一定要明确,因为无论在Android或iOS中,daliog都是依附于当前主页面的...

2018-08-22 11:08:17 15174 2

原创 Flutter的四种运行模式:Debug、Release、Profile和test

  Flutter有四种运行模式:Debug、Release、Profile和test,这四种模式在build的时候是完全独立的。Debug  Debug模式可以在真机和模拟器上同时运行:会打开所有的断言,包括debugging信息、debugger aids(比如observatory)和服务扩展。优化了快速develop/run循环,但是没有优化执行速度、二进制大小和部署。命令flut...

2018-08-21 15:53:26 24184

原创 Flutter中的代码混淆

  原文链接:https://github.com/flutter/flutter/wiki/Obfuscating-Dart-Code  以下内容均来自Flutter Github官方Wiki。  代码混淆可以隐藏你的Dart代码中的函数和类名,让反编译App变得困难。  注:Dart的混淆还没有经过完全的测试,如果发现问题请到GitHub上提 issue 。关于混淆的问题,还可以参考...

2018-08-21 15:02:54 4668 1

原创 关于Flutter的渠道(channels):master、dev和beta

  Flutter有以下三个渠道(channel),顺序按照稳定性依次增加:master  当前代码树的顶端,最新的版本。一般有很多新功能,但是不保证以后会不会砍掉。dev  以前叫alpha,是最新的完全测试过的版本。也包含了新功能,但是也会有一些"bad" dev builds,可以查看 Bad Builds 列表。beta  每隔几周都会选取近几个月中最好的一个dev...

2018-08-21 10:35:19 11297 1

翻译 Flutter中的国际化:如何写一个多语言的App

  原文链接:https://www.didierboelens.com/2018/04/internationalization---make-an-flutter-application-multi-lingual/  这篇文章介绍了一种让你的Flutter App支持多语言的方法,用户可以选择一种不同于手机设置中设置的语言。  难度:中等前言  国际化已经被讨论了很多次了,官方关...

2018-08-20 16:16:34 5621

原创 Flutter去除右上角Debug标签

  在MaterialApp初始化的时候,设置debugShowCheckedModeBanner: false即可:void main(){ runApp(new MyApp());}class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState(...

2018-08-20 14:49:18 12960

原创 Flutter如何强制竖屏

  如何在用户旋转屏幕的时候强制竖屏?  解决方法:void main(){ /// /// 强制竖屏 /// SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown ]); runApp(new M...

2018-08-20 14:43:46 7160 5

翻译 Flutter键盘不遮挡输入框,保证输入框获取焦点时可见

  翻译自原文:https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/ 2018.09.10更新:如果你更新了最新版本的Flutter SDK,控件EnsureVisibleWhenFocu...

2018-08-20 14:32:50 12380 11

原创 如何快速在macOS上搭建Flutter开发环境(编辑器Android Studio)

注:1、以下教程中如果出现下载失败的情况,请挂VPN尝试。  2、安装过程中有些步骤等待会比较漫长,请一定,要有耐心!!!Step 1 AS plugs库下载Flutter和Dart插件 搜索Flutter即可,安装时会提示你需要同时安装Dart插件,也就是说你装了Flutter后自带Dart插件,不需要额外安装Dart。如果出现网络超时,插件一直下不下来的情况,请在AS设置中...

2018-08-17 13:03:59 5755 1

原创 Flutter:实现一个滑动头部折叠的动画效果

更新:关于Slivers的具体用法,请看这篇文章:Flutter:Slivers大家族,让滑动视图的组合变得很简单!本文写的只是SliverAppBar的用法,实际上使用Slivers可以实现多种折叠效果。 Android和iOS中都有类似的滑动折叠效果,Flutter官方也提供了NestedScrollView控件来实现类似的效果,但是因为Flutter的一些特性,布局容易出现溢出,...

2018-08-17 12:59:14 13842 10

原创 仿QQ长按弹出复制、删除等浮层菜单

项目地址:https://github.com/yumi0629/TipMenu效果图:1528704163048.jpg1528704208814.jpg一款仿照QQ的长按/点击弹出复制、删除等浮层菜单控件。暂时支持向上、向下两个方向弹出。可以自定义字体、背景颜色。注:使用Kotlin书写。使用方法: val menus = ArrayList<String>() m...

2018-06-11 16:33:33 1858 2

原创 十分钟带你看懂Android-skin-support换肤框架,完美实现夜间模式

如题,这篇文章我讲的非常通俗易懂,是为了方便小白能够大致了解这个框架的粗略实现过程,大神们请绕道哦~  最近在做夜间模式,引用了ximsfei大神的Android-skin-support换肤框架来实现。该框架的整体的实现思想是:自定义ActivityLifecycle来记录Activities的生命周期,在每一个Activity执行完onResume()后,将Activity和LazySkinO...

2018-05-21 15:30:23 4889

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除