Flutter Toast、弹出提示、轻提示

Thursday, May 21, 2020

主流的三种APP反馈形式: toast、snackbar以及dialog. toast又称为弹出提示、轻提示.通常用于提示用户一些不那么重要的信息, 会弹出并显示文字一段时间. 时间一到就会消失. 相较于snackbar和dialog, 对屏幕的入侵较少. 身为开发人员怎能不掌握toast的基本使用? 这篇文章阿航就带着大家一起探讨一下Flutter中的toast. 效果 有图有真相, 我们来看下我们本次要实现的最终效果: 源码地址 👉在Github 或码云 上查看本篇文章全部代码. 搜索fluttertoast [epcl_box type=“information”]有同学会问, 为什么要选择插件, 不选择原生呢… 因为Flutter没有我们所需的这种效果! 只有自带的snackBar![/epcl_box] 老样子, 上pub.dev 寻找我们所需的插件, 在搜索框输入fluttertoast: 看到第一条: 99分, 相当高的评分. 点进去, 查看最新版本发布日期和兼容性: [epcl_box type=“information”]一般我们在选择一款Flutter插件时, 会先看它的评分(Flutter官方评分还是比较严格的). 之后再去看看它的最新日期(如果很久未更新, 可能项目已经停止维护了). 最后再来看看它的兼容性, 是否合乎我们的规则.[/epcl_box] 同时支持Android、IOS以及Web. 兼容性很好. 实战开始 创建项目 创建一个Flutter项目, 先来清理项目. 删除./test目录, 因为我们的这个项目只是一个简单的demo. 不需要测试驱动开发. 通过flutter创建的项目的./lib/main.dart会有很多自带的注释, 我们替换整个文件为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '阿航的技术小站 Flutter toast', theme: ThemeData( primarySwatch: Colors.

Flame 屏幕手柄/摇杆

Wednesday, May 20, 2020

可以看到, 目前最主流的手机游戏都使用屏上手柄/摇杆进行控制, 比如: [caption id=“attachment_1286” align=“aligncenter” width=“700”] League of Legends Mobile (英雄联盟手游)[/caption] [caption id=“attachment_1284” align=“aligncenter” width=“700”] PUBG Mobile (和平精英)[/caption] [caption id=“attachment_1288” align=“aligncenter” width=“700”] Minecraft PE(我的世界手机版)[/caption] 以上游戏都在当前手游榜(2020.04)排名前五. [epcl_box type=“information”]看得出来, 目前的核心玩法、操作交互都离不开手柄/摇杆![/epcl_box] 所以, 本篇文章就来教大家在使用Flame框架时, 在屏幕上展示摇杆, 并控制某些component! 我们要做的项目名称为Lame Tank 360(Lame坦克360). 本项目将完整支持360°的旋转. 并将坦克的"炮塔"与"坦克身体"分开. 因此, 我们必须建立两个摇杆. 需具备的条件 若想顺利学习本篇教程, 你需要具备: 掌握Flutter的基础用法. 已完整学习Flame系列教程. [epcl_box type=“notice”]如果你没有满足上述条件, 你将无法顺利完成这篇教程. 建议先阅读《Flutter游戏开发-Flame教程》 ![/epcl_box] 开始 创建Flutter项目 flutter create lame_tank_360 [epcl_box type=“information”]阿航的教程, 只要涉及到创建项目、命名的相关操作, 身为读者的你可以用阿航教程提供的, 你也可以自己起名! 别忘了替换代码中牵扯的名称为你自己的![/epcl_box] 初始化项目设置 现在项目是可以运行的, 但是只是Flutter默认生成的 清空./lib/main.dart, 并添加以下内容: import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; Future main() async { WidgetsFlutterBinding.

项目速度显著提高! Flutter官方宣布增加Adobe XD的支持!

Tuesday, May 19, 2020

Flutter作为近两年年来的新型APP开发语言, 其受欢迎程度甚至和React Native不相上下. 最近, Flutter发表了一篇振奋人心的文章, 那就是新增了对Adobe XD的支持. Sketch和Adobe XD 如果你涉足过设计领域, 那么一定知道两个设计工具, 分别是Sketch以及Adobe XD. 大多数互联网公司的设计稿输出, 都是靠它们来进行. 当然, Sketch有着一个比较致命的限制, 那就是目前并不支持Windows系统. 作为设计师, 你应该碰到过将设计稿交给开发人员后, 做出的效果差强人意. 即使开发人员保证了所有的位置、距离、长度均准确无误, 但是你却怎么看怎么别扭😥😥. 令人头大的position、px 作为前端开发人员, 你一定为这个问题头疼了无数次——布局! 没错, 你明明完全按照设计师给出的设计稿上标注的尺寸去做了, 但是效果就是不咋地! 要做出类似的效果, 你还要慢慢的调整! 累! 是时候解决双方的苦恼了 终于, 在2020年5月13日, Flutter官方宣布了Adobe XD对其的支持, 那么, 到底有何变化呢? 从Adobe XD导出Flutter代码 使用XD可以在几分钟内导出Flutter代码. 你可以导出单个图形, 也可以导出整张画板! 你不需要将设计稿转化为一个又一个的区块了! 直接微调就可以了! 减少浪费时间的布局调整 最让人头疼的就是数字了, 上面的生成代码, 同样会生成布局所需的各种数值! 原文译文 上面只列出了重点功能, 阿航给大家翻译了原文: Flutter的目标是为创意表达提供丰富的画布。借助iOS和Android上的硬件性能，对屏幕上渲染的每个像素的完全控制以及通过有状态的热重载进行快速迭代的能力，我们希望释放设计师和开发人员的潜力，建立不受人为技术边界限制的舒适体验. 去年在Flutter Interact活动上 ，我们将焦点放在使用Flutter进行探索和实验的创作者身上。我们听到了像Robert Felker 这样的数字艺术家的声音，他们使用Flutter通过生成算法构建空灵形式。我们介绍了gskinner之类的创意机构的工作 ，他们创建了一系列创新的短片来展示Flutter的潜力。我们还看到了Adobe的演示，该演示是Adobe XD插件 的早期原型，该插件 直接从其工具中导出Flutter代码。 (Flutter是用于创意表达的丰富画布：这是一种不受传统技术界限限制的美丽原生体验的工具包。（由Flutter制作的生成艺术品，由Robert Felker提供。)) 今天，我们很高兴与Adobe一起宣布他们的XD to Flutter插件<strong>现在可以作为</strong> 更广泛的公共测试的<strong>初步试用</strong> 。Adobe XD 是一个UI / UX设计和协作工具，可帮助团队为网站，应用程序，语音界面，游戏等创建和共享设计。XD 是Adobe同类领先的Creative Cloud的一部分 ，它使设计师可以将矢量艺术，文本，图像，微交互和动画转换为行为类似的工作软件产品的交互式原型。将设计导出到Flutter的能力进一步减少了创意与产品开发之间的等待时间，因为XD原型现在可以在数分钟内成为Flutter代码。Adobe XD支持Windows或macOS上的设计，并包括免费的入门计划 ，可助您启动并运行。

Git同时推送多个远程仓库

Monday, May 18, 2020

有时我们在进行开源的过程中, 少不了需要把代码推送到Github/码云上. 最传统的方式就是分别进行提交、推送. 但是重复劳动并不符合程序员思维😤! 是否有一种方法可以同时使用Git推送至不同的远程仓库呢? 答案是肯定的. 这篇文章就来记录一下如何"使用Git推送至多个远程仓库", 提高开发人员的工作效率. 需具备的条件 若要顺利阅读本文, 你需要具备如下条件: 掌握Git的基本操作 电脑已安装Git的操作环境 拥有Github账号 拥有码云账号 开始 创建远程仓库 Github 进入Github官网 , 点击创建仓库 : 输入仓库基本信息, 点击Create repository: 稍等片刻, 仓库创建完成: 至此, Github的准备工作完成. 码云 码云就简单多了, 因为码云可以直接导入来自Github的项目! 进入码云, 鼠标移至右上角的加号, 点击新建仓库按钮: 进入到仓库基本信息页面, 别急着填, 直接拉到最下面, 找到这个: 点击后, 输入上面Github的仓库地址, 点击创建: 等待片刻: 创建完成 创建、初始化本地仓库 创建本地仓库 在电脑中创建一个新目录: 右键, 点击Git Bash Here(如果没有, 直接用CMD进入目录即可) 初始化本地仓库 输入命令: git init 在项目目录中创建文件README.md: git提交 回到Git终端, 分别输入: git add README.md git commit -m "first commit" git remote add origin 你的Github仓库地址 至此, Github的远程仓库已经配置完毕

Ditto 无法 开机自启 的终极解决方案(Win10)

Saturday, May 16, 2020

近些年一直在使用Ditto作为剪贴板增强工具, 但是突然有一天Ditto无法开机自启了! 自己设置了N次, 还是不行! 但是开动脑筋想了一阵子, 一次又一次的尝试, 终于成功了! 尝试过的方法 在Ditto软件中设置系统自启动 以管理员身份运行Ditto 勾选"系统启动时运行" [caption id=“attachment_1213” align=“aligncenter” width=“701”] 勾选"系统启动时运行"[/caption] 如果你通过这样设置可以成功, 那么恭喜你🎉🎉. 但是我这样没成功, 开机并没有自启动, 点击快捷键也没有反应. 添加Ditto至Windows的"启动"目录 复制Ditto的快捷方式 Win+R打开"运行" 输入shell:Common Startup: 点击确定, 打开"启动"目录, 粘贴Ditto的快捷方式. 如果你通过这样设置可以成功, 那么恭喜你🎉🎉. 我同样死在了这一步. 重启后依然失败. 个人猜想 查询的过程 在网上冲浪的过程中, 并没有发现别人反馈类似的问题(可能是因为这个软件比较冷门)😑. 越过大墙, 发现真的有人反馈 : Win10 自带的剪贴板增强软件 无意中发现可以按快捷键Win+V唤起剪贴板: 这个自带的软件蛮简洁的, 喜欢的同学可以直接使用. (功能较少, 只有粘贴, 没有搜索) Win10故意屏蔽Ditto? 也许是微软看到Ditto的功能相当不错, 所以自己加了上面说的剪贴板工具. 为了将Ditto的用户引流过来, 故意屏蔽了Ditto. 以上纯属个人阴谋论、瞎猜, 请勿当真😏😏 终极解决方案 人之所以被称为万物之灵, 是因为人的智慧是无穷无尽的. 这一点在程序员身上提现的淋漓尽致. 那么, 现在就开始吧! 创建命令行文件 创建文件start_ditto.bat(名称随意, 后缀不能变) 使用记事本打开, 编辑. 输入以下内容: start "" "D:\Program Files\Ditto\Ditto.

MyBatis Plus 分页查询返回的 数据总数total为0 的解决方案

Friday, May 15, 2020

今天在使用MyBatis-Plus在进行分页查询时, 返回的IPage对象数据的total属性一直是0. 没有数据总数, 前端的分页部分将会比较难搞, 在此记录一下排坑过程. 开发环境 本教程的开发环境如下: 名称 版本 JDK 1.8 Spring Boot 2.1.14.RELEASE Mybatis-Plus 3.2.0 解决方案 方案一: 添加配置类, 注入PaginationInterceptor(推荐) 创建类文件MybatisPlusConfig文件, 输入以下代码: [epcl_tabs] [epcl_tab title=“Kotlin”] import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor import org.springframework.context.annotation.Bean import org.springframework.context.annotation.Configuration @Configuration class MybatisPlusConfig { /** * 分页插件 */ @Bean fun paginationInterceptor(): PaginationInterceptor { return PaginationInterceptor() } } [/epcl_tab] [epcl_tab title=“Java”] import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class MybatisPlusConfig { /** * 分页插件 */ @Bean public PaginationInterceptor paginationInterceptor() { return new PaginationInterceptor(); } } [/epcl_tab] [/epcl_tabs]

修改Flutter的APP图标、启动器图标

Thursday, May 14, 2020

在APP上线前, 我们肯定需要修改APP的启动图标. APP图标代表了它的品牌, 增加了辨识度. 让用户可以在手机的APP列表内快速找到你的APP. 所以本篇博客将记录修改Flutter 的APP图标/启动器图标的全过程. Android图标 查看初始图标 打开目录./android/app/src/main/res, 你会发现有如下几个目录: mipmap-hdpi mipmap-mdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 如图: 当你打开每个文件, 会发现每个图标都是这张初始图片: 图标尺寸规范 我们需要准备以下图片: 对应目录 尺寸 mipmap-mdpi 48×48 mipmap-hdpi 72×72 mipmap-xhdpi 96×96 mipmap-xxhdpi 144×144 mipmap-xxxhdpi 192×192 图标命名规范 它们的文件名通通是ic_launcher.png! 图标目录结构 目录结构: ./android/app/src/main/res/mipmap-mdpi/ic_launcher.png ./android/app/src/main/res/mipmap-hdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xhdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png 替换完成后, 重新运行你的Flutter项目. 看看你的调试设备的APP启动图标, 你应该就可以看到修改的结果了! 感谢 Pexels 上的 Pixabay 拍摄的照片 结语 如果你对本篇文章有任何问题, 欢迎在下方评论区, 进行讨论, 或加入阿航的技术小站交流群 欢迎访问阿航的技术小站 官网, 获取更多技术干货!

在Flutter中使用16进制颜色

Wednesday, May 13, 2020

使用16进制表示颜色是较为主流的方式, 那么在本篇文章中将简单讲讲如何在Flutter中使用16进制颜色. 方法一: 使用原生方法 Flutter中, Color类仅接收整数作为参数. 你也可以使用fromARGB或者fromRGBO. 比如拿到了一个16进制颜色#b74093. 因为Color还需要传入透明度, 255就是最大值(也就是不透明), 转为16进制就是0xFF, 所以我们只需这样表示: const color = Color(0xffb74093); 正规一点的写法(可选, 因为大小写不敏感): const color = Color(0xFFB74093); 方法二: 接收字符串格式, 转为Color 创建一个HexColor类: class HexColor extends Color { static int _getColorFromHex(String hexColor) { hexColor = hexColor.toUpperCase().replaceAll("#", ""); if (hexColor.length == 6) { hexColor = "FF" + hexColor; } return int.parse(hexColor, radix: 16); } HexColor(final String hexColor) : super(_getColorFromHex(hexColor)); } 然后进行调用: Color color1 = HexColor("b74093"); Color color2 = HexColor("#b74093"); Color color3 = HexColor("#88b74093"); 感谢 How do I use hexadecimal color strings in Flutter?

移除Flutter右上角的DEBUG标识

Tuesday, May 12, 2020

在使用Flutter进行开发时, 右上角会出现一个DEBUG的标识. 测试的时候倒是无所谓, 但是APP上线前肯定要将其去掉. 证明其是一个开发完成的、完整的APP. 这篇非常简短的博客将会记录如何去掉Flutter右上角的DEBUG标识. 一共有两种方式, 你可以按需来选择! 自动移除 别担心, 你在为Flutter打正式包的时候, 这个标志将会自动消失. 但有的时候我们想在开发过程中直接去掉, 那么你会需要下面的手动移除. 方法一: 代码修改 找到你的MaterialApp(建议直接使用关键字进行全局搜索), 为其添加一个属性即可去掉: MaterialApp( debugShowCheckedModeBanner: false, // ... 其他配置 ) 如图: 方法二: Android Studio修改 如果你用的是Android Studio, 那么你可以不修改代码, 通过鼠标来移除: 第一步: 点击界面右侧侧边栏的Flutter Inspector, 如图: 第二步: 点击弹出界面的"More Actions"的下拉选(这个按钮字比较小, 比较隐蔽): 第三步: 点击下拉选项的"Hide Debug Mode Banner": 搞定! 感谢 Pexels 上的 Jaymantri 拍摄的照片 How to remove debug banner in flutter on android emulator? - Stack Overflow (排名不分先后) 结语 两种方式都可以进行修改, 唯一的区别就是方法一影响代码, 方法二不会变动代码. 你可以按实际情况选择你需要的方式!

MySQL 创建用户 & 授权

Monday, May 11, 2020

MySQL 等主流 数据库 的最高权限一般是root用户. 有时我们需要提供数据库的账号和密码以使用某些服务. 但实际上每个服务只会使用1个左右的数据库. 直接将root账号和密码随意分配是一件很危险的事情. 所以我们需要单独的 创建用户, 并 授权 需要的数据库给它. 用户管理 创建用户 创建用户harrison, 并指定IP为192.118.1.1; 设置密码为123 CREATE USER 'harrison' @'192.118.1.1' IDENTIFIED BY '123'; 创建用户harrison, 任意IP即可登录; 设置密码为123 CREATE USER 'harrison' @'%' IDENTIFIED BY '123'; 删除用户 删除用户名为harrison, 且IP为192.118.1.1的用户 DROP USER 'harrison' @'192.118.1.1'; 修改用户名及IP 修改用户名为harrison, 不限制登录IP的用户 -> 用户名harry, 限制登录IP为192.168.1.1 RENAME USER 'harrison' @'%' TO 'harry' @'192.168.1.1'; 修改用户密码 修改用户名为harrison, 不限制登录IP的用户的密码为456 SET PASSWORD FOR 'harrison' @'%' = PASSWORD ( '456' ); 用户授权 查看用户拥有权限 查看用户harrison拥有的权限: