你好，我是 zhenguo 最近有些粉丝问我关于数据可视化展示的问题，主要集中在如何选用最合适的图形表达数据的问题。所以今天先写一篇关于数值型变量可视化的总结。...2 双变量 2.1 有序的双变量 有序的定义如下，变量Var1是严格有序的，取值为 1,2,3,4 ? 对于这类数据结构，考虑使用带有散点或不带有散点的折线图表达，如下为带有散点的折线图： ?...常用的比如， 3.1 气泡图： 气泡图是一种散点图，其中添加了第三个维度：通过点的大小表示附加数值变量的值。 ? 3.2 堆积面积图 堆积面积图是基本面积图的扩展，它在同一图形上显示多个组的值的变化。...每个组的值都显示在彼此的顶部，这样就可以在同一个图形上检查一个数值变量的总和的演变，以及每个组的重要性。 ? 3.3 相关图 相关图或相关矩阵允许分析矩阵中每对数值变量之间的关系。 ?...3.4 热力图 热力图是数据的图形表示，其中矩阵中包含的单个值表示为颜色。这有点像从上面看数据表。 ? 3.5 树状图 树状图是一种网络结构。它由一个根节点构成，根节点产生多个由边或分支连接的节点。
在很多方面，它让我成为一个英雄，或者至少扮演一个英雄的角色。 NyxMud的一个特殊特性是，每次连接到play时，都是从一个空的库存开始的。...如果你死了，情况就更糟了：你可能会发现自己用一把新来的剑杀死了balls of slime，因为你收集了足够多的金子来制造更好的装备。...NyxMud让我着迷，几十年前我就这么说了。 所以，当到了“cast fireball”或者面对迫在眉睫、毁灭性死亡的时候，我被迫学习如何正确打字。...我真的很想学习如何编码，我也不想为杀死一个noobsword花费几个小时。 根据Lauren P. Burka的MUD时间表，在二月到1992年8月之间有一个非常小的时间窗口，那里是我探索的完美地方。...Mud学院（简称TMI）是一个非常特殊的Mud，旨在教人们如何在LPC中编程，照亮mudlib最黑暗的角落。它为所有申请和建立一个社区以发展新一代LPMuds的人提供了立即无所不能的服务。
前言 上一篇文章我们搭建好了 Flutter 的开发环境。 Flutter 即学即用系列博客——01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter。...运行项目 2.1 点击 IDE 运行按钮运行 ? 依次表示 flutter 要安装的设备，启动的 flutter 页面，以及运行按钮。 点击运行按钮之后可以看到设备上面显示如下界面： ?...3.2 命令行运行热重载功能体现 通过 flutter run 运行的 flutter 项目。控制台会有下面提示： ? 上面说了要热重载改变按 r 键，要热重启，按 R 键。...这个也是可以的。这边网上也有找了一下，不过文章位置说的是放到目的地，其实应该放在原始位置，让 IDE 去 unzip 到目的地。至少这边放到目的地 IDE 还是去重新下载了。...这边的位置是 /Users/nesger/.gradle/wrapper/dists/gradle-4.10.2-all/9fahxiiecdb76a5g3aw9oi8rv/， 我把压缩包扔到这个里面再执行
我是坚果，如果你迷惘，不妨看看码农的轨迹 Android Studio设置： 下载并安装 Android Studio。...设置Android SDK Manger路径+Java路径： 右键单击我的电脑。 转到属性。 选择高级系统设置。...单击环境变量 在系统变量选项卡下单击新建 新建”按钮并创建一个名为JAVA_HOME的新变量，并将 JDK 路径放在这里， 设置 Android Emulator 来测试应用程序： 在您的设备上启用虚拟机加速...选择您的设备类型，然后按下一步按钮。 选择 Android 操作系统映像。 现在为您的模拟器设置名称并按完成按钮。 完成加载 AVD 后，按RUN按钮启动模拟器。...下一节教大家如何创建第一个flutter程序
去Flutter官网下载最新可用的安装包，官网地址：https://flutter.io/sdk-archive/#macos 解压sdk，将sdk目录放在合适的位置 3.设置环境变量。.../demo/flutter_src/是我flutter文件夹的根目录，需根据情况自行修改。...一个是Xcode配置，另一个是AndroidStudio配置，都是与Flutter相关的。如果你未安装Xcode或者AndroidStudio，应该会提示你安装。...AppStore搜Xcode，发现我的Xcode需要更新了，按提示更新完毕。...以上就是环境搭建的整个过程，下一篇给大家讲如何用flutter运行最简单的应用“hello world”，敬请期待！ 祝你成功！
路由管理控制 路由是一个应用程序抽象的屏幕或页面； 路由管理就是管理页面之间如何跳转； 路由入栈指打开一个新页面； 路由出栈指一个页面关闭操作； 路由管理指如何来管理路由栈； Navigator是一个管理路由的...并在其中推入已命名的路由位置 pushNamedAndRemoveUntil 按路由名称将具有给定名称的路由推入导航器，然后删除所有 push 直接路由入栈 pushReplacement 替换当前路由栈...MaterialApp的，这个上下文不包含Navigator导航器操作， 所以我们应该把home的那部分抽出来放另一个类； 路由传值并返回值 路由传参在上面那个例子已经有了，num就是我们的参数，然后显示在标题上就是使用了...(21935): 接收到的参数：我是返回值 直接点击左上角那个返回值会为空，这样打印出来的就是： I/flutter (21935): 接收到的参数：null 所以我们做了一个判断，不为空才执行打印...';包； 使用： 直接把我们用来push的MaterialPageRoute更改为：CupertinoPageRoute即可查看动画效果； 自定义路由动画 首先编写好一个路由动画，路由动画必须继承至PageRouteBuilder
最近正式入坑Flutter，首先从环境搭建开始，看了网上好多关于Windows环境搭建的资料，基本都是按官方文档写的，看完的感受是，还不如直接去看官方文档。...本文主要总结我实际搭建的过程，最后发现不一定按网上那些博客或者官方文档写的来也可以搭建成功。...或者IntelliJ IDEA）配置flutter的SDK即可 说明 IntelliJ IDEA 通过plugins下载的插件都是放在安装目录下的plugins文件中，自己看一下就明白。...Androidstudio 通过plugins下载的插件是放在默认位置的，这一点和IntelliJ IDEA不太一样，我本地的默认的路径是在 C:\Users\.AndroidStudio3.1\config...其实到这我们需要准备的东西已经全了，下面看如何配置。 3. 配置Dart和Flutter插件到我们的ide中 我使用的是IntelliJ IDEA，Androidstudio类似。
我们也可以自定义一个返回按钮来演示一下返回操作。...命名路由 上文中介绍了Flutter中的普通路由，在小项目中使用普通路由是比较合适的，但是在一些大型商业项目中，我们最好还是统一管理路由，即使用命名路由。...总结 关于命名路由使用的前前后后，我在该文中都做了详细总结，并且做了代码分离，后续在项目中，我们可以参考该文进行命名路由的配置。 替换路由 前文中我们了解了Flutter中的普通路由和命名路由。...今天我们接着来聊聊Flutter中的替换路由和如何返回到跟路由。...，用即将跳入的页面来替换当前页面在路由栈中的位置。
在Flutter中，Container本身可以单独作为控件存在（比如单独设置背景色、宽高），也可以作为其他控件的父级存在：Container可以定义布局过程中子Widget如何摆放，以及如何展示。...接下来，我通过一个示例，与你演示如何定义一个Container。...比如，我可以把一个Text包在Center里，实现居中展示： Center( child: Text("Center"), ); ?...如同Android的LinearLayout、前端的Flex布局一样，Flutter中也有类似的概念，即将子Widget按行水平排列的Row，按列垂直排列的Column，以及负责分配这些子Widget在布局方向中剩余空间的...层叠Widget布局：Stack与Positioned 有些时候，我们需要让一个控件叠加在另一个控件的上面，比如在一张图片上放置一段文字，又或是在图片的某个区域放置一个按钮。
Stack就是一个栈的结构，在Stack中你可以将一个widget放在另外一个widget的上面。...appBar按列的布局又可以分为三部分，第一部分是一个IconButton表示导航菜单,第二部分是一个Text表示页面标题，第三部分也是一个IconButton表示搜索按钮。...那么按照Flutter的widget的构建原则，我们可以把appBar构建成一个Widget。...我们将其合和appBar合并起来，放在一个Column中，按行进行分割： class MyScaffold extends StatelessWidget { const MyScaffold({Key...State中可以包含一些可变的属性，这些属性可以跟用户的操作进行交互，从而完成一些比较复杂的功能。 假如我们需要下面的一个界面，界面右下方有一个按钮，点击一次，可以将中间的数字加一。
2.3.2 配置 将下载的压缩文件解压到某个位置（看作是安装位置），然后将该位置的路径配置到环境变量中。 然后在cmd命令窗口中执行“flutter doctor”命令对环境进行初始化。...选择Flutter Application，单击“Next”按钮，进入项目配置界面。 可以修改项目名称、项目放置位置、项目描述，然后单击“Next”按钮，进入包名设置界面。...2.5 项目结构 在Flutter应用开发中，图片、静态配置和资源都可以放在assets目录下。...6）只升级依赖包： flutter packages get flutter packages upgrade 2.9 Flutter包管理 一个完整的应用往往会依赖很多的第三方包。...最后在弹出框中修改项目名称，按回车创建项目。 2.10.4 运行项目 运行前需打开模拟器。 可以在终端输入flutter run命令运行项目。
终于把基本的组件扯完了,真的是多如牛毛。现在让我们来看一下控件如何实现交互 最后会实现一个简单的有点笔触效果的画布,来说明如何使用手势交互。...1.从RaisedButton看事件交互 Flutter的组件中有很多是有点击事件的，比如按钮，这里简单翻一下源码。...1.1：RaisedButton的使用 下面是RaisedButton的简单使用,点击按钮会打印日志 var show = RaisedButton( child: Text("RaisedButton...} } } 于是我们发现了一个掌控事件的幕后大佬:GestureDetector 2.GestureDetector事件处理 首先本质上要认清,GestureDetector是一个无状态的...,日志为: I/flutter (13474): 竖直拖拽按下----(x,y):(68.27012125651042,171.9265340169271) I/flutter (13474): 开始竖直拖拽
，即如何把一段字符串分为几个片段来管理，给每个片段单独设置样式。.../** * 声明了一个有着 100 个元素的列表项，当滚动视图到特定位置后，用户可以点击按钮返回列表顶部： */ class MyAPPState extends State {...经典布局：如何定义子控件在父容器中的排版位置 Flutter 提供了 31 种布局 Widget，对布局控件的划分非常详细，一些相同（或相似）的视觉效果可以通过多种布局控件实现。...而关于资源的存放位置，Flutter 并没有像 Android 那样预先定义资源的目录结构，所以我们可以把资源存放在项目中的任意目录下，只需要使用根目录下的 pubspec.yaml 文件，对这些资源的所在位置进行显式声明就可以了...不过 Flutter 无法像浏览器冒泡那样取消或者停止事件进一步分发，我们只能通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件，或者交给其视图层级之下的组件去响应
在Flutter中，google则为我们集成了一些常用的图标。...是我们自己定义的字体 ? 字体呢就是我们在阿里图标上面下载下来的文件。 这些就是关于 Icon 的简单介绍。 RaisedButton 其实这就是一个按钮，一个凸起的材质矩形的按钮。...: Text("textColor文本的颜色，color背景颜色，highlightColor按钮按下的颜色"), textColor: Color(0xffff0000), color...> {}, ), floatingActionButtonLocation 前面讲的是设置一个浮动按钮，这个浮动按钮的位置默认是在右下角。...总结 Flutter的基础的组件就讲到这里，涉及到的大都是常用的组件，部分东西没有涉及到或者说没有详细说明，可能是因为我认为不用过多说明，可能是因为没有太多时间，也可能是因为我自己也不看明白，如果你不懂
该如何修复呢？我们只需要在组件的构造函数中添加一个key参数即可。可以利用 Android Studio 来修复，将鼠标放在警告上面，然后点击Add key to constructor即可。...该如何修复呢？我们只需要在组件的构造函数前面添加const关键字即可。可以利用 Android Studio 来修复，将鼠标放在警告上面，然后点击Add const modifier即可。...obscureText：一个布尔值，用于控制是否隐藏输入内容，常用于密码输入。onChanged：当文本发生变化时触发的回调函数。onSubmitted：用户在键盘上按下完成按钮时触发的回调函数。...3.参考资料https://api.flutter.dev/flutter/material/TextField-class.htmlEnd如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流...您的每一条评论对我都至关重要，我会尽快给予回复。如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。您的每一个动作都是对我创作的最大鼓励和支持。谢谢您的阅读和陪伴！
谷歌放弃优先考虑自己的短期利益，把对世界的长远利益放在首位，却被公众舆论冷嘲热讽，这让我感到非常沮丧。 2011 年，Charlie 的露台。图片经过后期处理，去除了原画面中的人物。...我大部分工作都是拿着笔记本在谷歌园区内随机的位置上完成的，好几年我都没用过分配给我的办公桌。 但随着时间推移，谷歌文化也出现了例外。...Flutter 是「旧谷歌」的最后一个项目。...她以一种非人化的方式对待工程师，把他们当作商品，违背他们的意愿，以和专业技能完全无关的方式分配工作。她根本不接受建设性的意见。...我听说其他「情商更高」的团队已经悟出一套应付她的策略：在合适的时间为她提供合适的信息。正是因为经历过谷歌的巅峰时刻，后来的落差才令我难以接受。 谷歌仍然拥有丰富的优秀人才。
这一层的功能是用来解决跨平台的。 了解了 FLutter 之后，我来说一下今天的重头戏，Flutter for Web。要想知道 Flutter 为什么能在 web 上运行，得先来看看它的架构。 ?...输入 Project 名称 (如 flutterweb), 然后按回车键 指定放置项目的位置，然后按蓝色的确定按钮 等待项目创建继续，并显示 main.dart 文件。...main.dart 初始化文件，图片相关资源放在此目录。 lib 目录下的 main.dart，是主程序代码所在的地方。...，运用了 AppBar 组件，它包括了一个居中的页面标题和居右的搜索按钮。...我觉得随着谷歌的持续优化，等到正式版发布之后，开发体验越来越好，Flutter 开发者会吃掉 H5 很大一部分份额。
本篇文章中，我们就通过编写一个简单的 Flutter 来了解他的开发流程。 这里我们要开发的 demo 很简单，只是在屏幕中间放一个按钮，点击的时候，模拟摇两个骰子并弹窗显示结果。...为了把按钮放在屏幕的中央， // 这里使用了 Center（它是一个 widget）。...void _onPressed() { debugPrint('_onPressed'); } 保存后（会自动 Hot Reload），我们再次点击按钮，在我的设备上，打印出了下面这样的信息： I/...这是一个按模板生成的文件，有些东西可能需要修改一下 build.gradle，这里面也可能有你需要修改的地方。...生成签名的 key（如果你已经有了，跳过这一步）,为了让读者也可以编译，这里我把 key 也放到了项目中。
如下所示，我定义了一组列表项组件，并将他们放在了垂直滚动的ListView中： ListView( children: [ //设置ListView组件的标题与图标...第一种方式实际上是试图的结合，之前已经聊了很多了，这里不做过多介绍。接下来，我演示一下如何使用ListView.separated设置分割线。...这时，各自视图的滚动和布局模型就是相互独立、分离的，就很难保证整个页面统一一致的滑动效果。 那么，Flutter是如何解决多ListView嵌套时，页面滑动效果不一致的问题的呢？...如下代码所示，我们声明了一个有着100个元素的列表项，当滚动视图到特定位置后，用户可以点击按钮返回到列表顶部： 首先，我们在State的初始化方法里，创建了ScrollController，并通过_controller.addListener...方法注册了滚动监听方法回调，根据当前视图的滚动位置，判断当前是否需要展示“Top”按钮。
这里我们出现了第一个问题：我们把当前购物车的状态放在哪合适呢？ 2. 提高状态的层级 在 Flutter 中，有必要将存储状态的对象置于 widget 树中对应 widget 的上层。 为什么呢？...现在我们知道在哪里放置购物车的状态，接下来看一下如何读取该状态。 3. 读取状态 当用户点击类别页面中的一个元素，它会被添加到购物车里。...然而当购物车在 widget 树中，处于 MyListItem 的层级之上时，又该如何访问状态呢？ 一个简单的实现方法是提供一个回调函数，当 MyListItem 被点击的时候可以调用。...我们已经知道了该把 ChangeNotifierProvider 放在什么位置：在需要访问它的 widget 之上。...child: SomeExpensiveWidget(), ); 最好能把 Consumer 放在 widget 树尽量低的位置上。
领取专属 10元无门槛券
手把手带您无忧上云
