Flutter为widget添加border边框、下划线

Monday, Jun 15, 2020

有时我们需要为Flutter的widget小部件添加各式各样的边框. 但是并不是所有widget都提供了边框的属性, 本篇文章就来记录下如何为Flutter 的 widget 添加border边框、下划线. 效果 有图有真相, 先来看下我们要实现的最终效果: 需具备的条件 你已经掌握Flutter基础 本篇文章的开发环境: 环境 版本 操作系统 Windows 10 Flutter 1.19.0-2.0.pre IDE Android Studio 3.5 [epcl_box type=“information”]速度快的同学直接复制下方的"全部源码"自行研究! 稳一点的同学请按照教程一步一步来! [/epcl_box] 实战开始 创建项目&清理代码 为了便于演示, 阿航在这里创建一个空项目. 创建完成后, 删除./test目录. 因为我们的demo无需测试类. 替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Awesome Border', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(title: 'My Awesome Border'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

MySQL JOIN MIN()/MAX() 组合使用

Tuesday, Jun 9, 2020

这次阿航在开发后端接口, 写复杂SQL查询时碰到了这个问题, 我需要将MySQL的JOIN关键字和MIN()同时使用. 本篇文章就来记录下MySQL JOIN MIN()/MAX()的组合使用. 应用场景 大家都有过淘宝网购的经历, 应该记得在搜索时, 出来的结果列表都是每个产品的最小价格. 点进去后, 选择不同的型号会有相应的价格. 阿航碰到的是我有两个表, 一个是SPU(产品表), 一个是SKU(商品表), 它们是一对多的关系(因为一款产品会有多个型号). 我需要在查询SPU的同时, 再把对应的最便宜的SKU的价格进行返回. 总结: 一对多关联查询, 并且把多的表的最大/最小值返回. 实战开始 [epcl_box type=“information”]为了方便大家理解, 阿航在这里进行相应的简化[/epcl_box] 数据关系 先来看下两个表的关系: 其中, 一个SPU对应多个SKU ( 比如一件衣服有多个颜色 ). 💡 解析 初始化数据库 进入数据库, 运行以下SQL语句定义并初始化数据表: CREATE DATABASE mysql_join_demo DEFAULT CHARACTER SET = 'utf8mb4'; USE mysql_join_demo; CREATE TABLE t_spu( id BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键', name VARCHAR(32) NOT NULL COMMENT '产品名', PRIMARY KEY (id) ) COMMENT = '产品SPU表'; CREATE TABLE t_sku( id BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键', spu_id BIGINT NOT NULL COMMENT '产品ID', spec VARCHAR(32) NOT NULL COMMENT '型号', price BIGINT NOT NULL COMMENT '价格', PRIMARY KEY (id) ) COMMENT = '商品表'; INSERT INTO `mysql_join_demo`.

Flutter 实现毛玻璃/磨砂效果

Monday, Jun 8, 2020

还记得之前风靡一时的Windows 7的毛玻璃效果吗? 虽然过去了好多年, 但毛玻璃效果一直没有过时👨‍🎓. 本篇文章就来记录下如何使用Flutter实现毛玻璃/磨砂效果. 效果 有图有真相, 先来看下我们要实现的最终效果: 环境&需具备的条件 本篇文章的开发环境: 若想顺利阅读本篇教程, 你需要具备: 计算机已安装Flutter开发环境 掌握Flutter基础 实战开始 创建项目, 清理代码 先来创建一个空项目, 直接用IDE创建或在终端中输入: flutter create my_frosted 删除./test目录. 并替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Frosted Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFrosted(), ); } } class MyFrosted extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [], ), ); } } 🟢 运行项目, 可以看到白白的一片, 啥也没有:

Git统计指定时间日期范围内代码量、代码行数

Saturday, Jun 6, 2020

因为要写周工作报告, 自己希望将本周的工作量化出来. 所以想到: “能不能统计一下本周我的代码总行数呢?”. 本篇文章就来记录下Git统计代码量、代码行数. 应用场景 量化工作报告(就像阿航的需求) 项目统计 小组工作占比统计 环境&需具备的条件 本篇博客环境: 环境 版本 操作系统 Windows 10 家庭版 Git 2.25.0.windows.1 本篇博客假定你具备以下条件: 计算机已部署git环境 熟悉git基本命令 实战开始 本篇教程相当简单. 几步搞定. 打开git终端 首先, 进入你的项目目录, 右键打开git bash: 会出现一个比较可爱的窗口: 输入统计命令 重点来了! 输入git统计时间段内命令: [epcl_box type=“notice”]这里不能使用Windows的CMD替代git bash进行操作. 会报各种奇葩的错误![/epcl_box] git log --since="2020-06-01" --before="2020-06-05" --author="阿航" \ --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "新增行数: %s, 移除行数: %s, 总行数: %s\n", add, subs, loc }' 参数 含义 --since=“2020-06-01” 统计起始日期 --before=“2020-06-05” 统计结束日期 --author=“阿航” 需要统计的开发者 将以上参数替换为自己的!

MyBatis-Plus 读写 Mysql的Json类型字段数据

Friday, Jun 5, 2020

Mybatis-Plus是一款相当优秀的开源框架, 为单表操作提供了极大的便利. 这次阿航在写服务端时, 需要对MySQL的json类型字段进行操作, 忙活了一阵, 终于找到了解决方案, 并在本篇文章进行记录. 需具备的条件 本篇文章环境: 环境 版本号 Mybatis-Plus 3.3.2 本篇文章假定: 你掌握Java/Kotlin基础(注解) 你掌握Mybatis以及Mybatis-Plus的基本使用 你了解FastJSON或Gson [epcl_box type=“notice”]如果还不具备以上的条件, 阅读本篇文章可能会有阻碍! 建议先满足条件后再尝试阅读![/epcl_box] [epcl_box type=“information”]老规矩, 速度快的同学直接向下拉. 看核心代码.[/epcl_box] 场景 我们拥有一个json类型的数据库字段, 我们在进行写操作时, 不希望将对象转为json字符串再存数据库. 读数据也是一样. 我们希望这一切自动完成. 准备工作 我们先来创建一个数据库表: CREATE TABLE `mybatis_json_test` ( `id` int(10) NOT NULL AUTO_INCREMENT PRIMARY KEY, `extra_object` json NULL, `extra_list` json NULL, `extra_array` json NULL ); INSERT INTO `mybatis_json_test` VALUES ( 1, '{\"id\": 1, \"name\": \"2\"}', '[{\"id\": 1, \"name\": \"2\"}]', '[{\"id\": 1, \"name\": \"2\"}]' ); 实战开始 创建表对应实体类 首先创建实体类MybatisJsonTest:

Github/Gitlab 等远程Git仓库fork后与原仓库同步

Thursday, Jun 4, 2020

看到这篇文章, 说明你也是个勤奋的贡献者🤝🤝. 同学们在贡献代码 PR 前, 都需要将原仓库fork下来. 但有时原仓库的代码比我们fork后的代码新, 并且github目前似乎并未提供自动fork的机制. 本篇文章就来记录下Github/Gitlab 等远程Git仓库fork后与原仓库同步的方法. 适用场景 github等远程仓库的原仓库代码有大量变更, 需要将自己fork下来的仓库和原仓库同步. 需具备的条件 本篇教程假定: 你已经掌握基础的CMD/Bash/Shell终端命令. 你已经掌握了基本的Git命令以及Github操作. 你已经有了待同步的、fork下来的代码仓库. [epcl_box type=“notice”]本篇教程将会尽可能减少废话, 只放干货. 所以请你仔细阅读并严谨遵循教程步骤![/epcl_box] 解决方案 查看当前远程仓库配置 打开终端, cd至仓库目录内. 输入以下命令以查看当前的远程仓库: git remote -v 正常情况下, 会返回类似于: git remote -v origin https://github.com/你的用户名/你的仓库名.git (fetch) origin https://github.com/你的用户名/你的仓库名.git (push) [epcl_box type=“notice”]如果你未返回数据, 请检查你的本地仓库是否关联了远程仓库. 若格式和上面不一致, 请检查你的仓库状态.[/epcl_box] 绑定上游远程仓库 紧接着输入以下命令行, 绑定上游仓库: git remote add upstream "https://github.com/上游用户名/上游仓库名.git" 再次查看当前仓库: git remote -v 正常情况下, 会返回类似于: git remote -v origin https://github.com/你的用户名/你的仓库名.git (fetch) origin https://github.com/你的用户名/你的仓库名.git (push) upstream https://github.

开启Win10的内置Linux系统(Ubuntu)

Wednesday, Jun 3, 2020

不知道从哪个版本开始, Windows开始内置Linux系统了. 在之前的开发中, 两个系统切换超级麻烦, 不管是虚拟机、双系统还是双电脑, 极大的降低了开发速度, 并不符合程序员思维. 所以只能舍弃其中一个. 然而大多数的软件开发环境还是Linux更舒适. 本篇文章就来记录下如何开启Win10内置的Linux系统. 需具备的条件 本篇文章的阿航的电脑系统及配置(配置略低, 莫笑😝😝): 电脑配置 Windows 10 版本 [epcl_box type=“notice”]注意对照系统版本, 若你的版本过旧, 可能无法顺利遵循本文章进行配置内置Linux系统.[/epcl_box] 开始 开启开发者模式 点击开始, 输入开发者设置: 点击进入, 选中开发人员模式, 它会自动安装一些东西, 耐心等待完成: 启用Linux子系统 点击开始, 输入启用或关闭Windows功能: 出现一个非常可爱的窗口, 向下拉, 找到适用于 Linux 的 Windows 子系统, 勾选, 确定: 将会分别经过三个步骤: 跟随引导, 点击"立即重新启动"(别忘了保存阿航的教程啊, 等下还要回来呢😄😄😄😄) 安装Ubuntu 开机后, 点击开始, 输入Microsoft Store, 点击进入. 点击右上角"搜索", 输入Ubuntu, 可以搜索到如下结果: 选择你需要的Ubuntu版本(如果不知道怎么选, 就直接选第一个Ubuntu), 点击进入详情页: 点击获取按钮. 可能遇到的问题: 如果你遇到了你所在的地区不支持通过 microsoft.com 购买的解决方案, 可阅读这篇文章 : 如果你点击获取按钮没反应, 可阅读这篇文章 解决. 获取中: 获取完成, 点击安装:

Default value of an optional parameter must be constant

Tuesday, Jun 2, 2020

今天阿航在使用Flutter进行开发时, 希望为final修饰的实例变量提供默认值. 尝试过程中IDE报错: Default values of an optional parameter must be constant. 本篇文章就来记录下碰到这种问题该如何解决! 错误示例 [epcl_box type=“information”]因为阿航出错的源码并不便于演示, 所以这里采用Stack Overflow上的简单示范, 使大家更直观的解决问题.[/epcl_box] 先来看下错误源码: enum MyEnum { a, b } class ClassA { final MyEnum myEnum; ClassA({this.myEnum = MyEnum.a}); } class ClassB { final ClassA classA; ClassB({this.classA = ClassA()}); // ClassA 报错 } 乍一看似乎没有什么问题, 但是实际上Dart并不允许这种写法. 解决方案 其实解决方案很简单, 来看下修改后的代码(注意高亮的行): enum MyEnum { a, b } class ClassA { final MyEnum myEnum; const ClassA({this.myEnum = MyEnum.a}); } class ClassB { final ClassA classA; ClassB({this.

你所在的地区不支持通过 microsoft.com 购买 的解决方案

Monday, Jun 1, 2020

今天在安装Win10应用商店的软件时, 在点击获取时, 很蛋疼的给我提示: 你所在的地区不支持通过 microsoft.com 购买, 服了. 只能再次填坑. 本篇文章就来记录下如何解决这个坑爹的问题. 错误展示 先来看下是在何种情况下出现这种错误的: 去他的吧, 还在Xbox One主机上购买. 用户体验极差🤬🤬🤬🤬 解决方案 修改系统地区 点击开始, 输入区域设置: 点进去, 修改国家或地区为美国(要不是为了下载软件, 谁会改!): 如果刚才你没有退出Microsoft应用商店, 会弹出如下窗口, 我们点击刷新 Microsoft Store: 如果退出了也没关系. 再次进入Microsoft应用商店即可. 刷新后的Microsoft应用商店很明显推送的名称都变成了英文: 再次进入我们要下载的应用页面: 很明显, 获取按钮下方的naocan提示没有了! 其他问题 如果点击"获取"按钮无反应, 可以看下这篇博客 .

Windows 10 Microsoft应用商店点击获取按钮无法下载、没反应

Sunday, May 31, 2020

在使用Microsoft应用商店, 准备下载某个应用时, 点击获取按钮. 手都tm按麻了也没见开始下载…甚至连提示都没有!! 服了这微软. 本篇文章就来记录下如何解决此问题. 问题展示 所在地区不支持 如果你是如图的问题, 请先移步《你所在的地区不支持通过 microsoft.com 购买的解决方案》 : 点击获取按钮无反应: 当你点击如下图的获取按钮后, 界面一动不动, 没有任何回应、提示: 本篇文章就是来解决这个问题的. 解决方案 方案一: 清理Microsoft应用商店缓存 先关闭所有打开的应用商店窗口. 右键开始, 点击Windows Powershell(管理员): 在命令行中输入wsreset: 输入回车, 耐心等一下(因为不会有反馈, 甚至进度条也没有), 阿航大概等了3分钟左右. 清理完成后会弹出商店: 再次进入应用下载页, 点击获取: 当然, 这种方式可能无法解决问题, 若如此, 请继续看下面的解决方案. 方案二: 重置Microsoft应用商店 点击开始, 输入应用和功能: 点击进入, 向下拉, 找到Microsoft Store, 单击它, 点击高级选项: 进入到高级选项窗口, 向下拉, 找到重置: 点击重置, 并确认重置: 等待, 转圈: 重置完成后, 重置按钮右边会出现"√": 再次打开应用商店, 看看是否成功. [epcl_box type=“success”]阿航在这一步成功了![/epcl_box]