一个写代码的废物

导航返回拦截为了避免用户误触返回按钮而导致应用退出，很多应用中都拦截了用户点击返回键的按钮，然后进行一些防误触判断，比如用户在某个时间段内点击两次，才会认为用户要退出，而非误触。在 Flutter 中，可以通过 WillPopScope 来实现返回按钮拦截。构造函数：const WillPopScope({ ... @required WillPopCallback onWillPo...

GridViewGridView 用于构建一个二维网格列表，定义：GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap ...

ListViewListView 是最常用的可滚动组件之一，它可以沿一个方向线性排列所有子组件，并且它也支持基于 Sliver 的延迟构造模型。定义：ListView({ ... //可滚动widget公共参数 Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController con...

SingleChildScrollViewSingleChildScrollView 只能接受一个子组件，定义如下：SingleChildScrollView({ this.scrollDirection = Axis.vertical, //滚动方向，默认是垂直方向 this.reverse = false, this.padding, bool primary, ...

可滚动组件当组件内容超过当前显示视口时，如果没有做特殊处理，那么 Flutter 会抛出异常。为此，Flutter 提供了多种可滚动组件用于显示列表和长布局。可滚动组件都直接或间接包含一个 Scrollable 组件，定义：Scrollable({ ... this.axisDirection = AxisDirection.down, this.controller, th...

Scaffold一个完整的页面可能会包含导航栏、抽屉菜单以及底部导航等等。如果每个路由页面都需要开发者自己手动去实现这些组件，这将会是很差的体验。在 Material 组件库中，提供了 Scaffold 组件用于搭建一个页面的骨架，让我们很容易的拼装出一个完整的页面。AppBarAppBar 是一个 Material 风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的 Tab ...

Container其实在前面的很多例子中已经使用到这个 Container 组件了，但是一直没有详细的介绍，所以在此就来重新的认识它吧。Container 是一个组合类容器组件，它本身不对应具体的 RenderObject，它是 DecoratedBox、ConstrainedBox、Transform、Padding 以及 Align 等组件的一个多功能组合，所以，只需要通过一个 Conta...

变换对于变换这个术语肯定都不陌生了吧，在 CSS 中也有这个概念。在 Flutter 中，主要通过 Transform 类来描述变换。它可以控制子组件一些关于矩阵变换特效。看一个例子：class ConstrainedWidget extends StatelessWidget{ @override Widget build(BuildContext context) { re...

装饰容器在 Flutter 中，可以使用 DecoratedBox 来给子组件进行装饰，比如：背景、边框、渐变等等。DecoratedBox 的定义：const DecoratedBox({ Decoration decoration, DecorationPosition position = DecorationPosition.background, Widget child...

尺寸限制容器在 Flutter 中，提供了 ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio 来限制子元素的尺寸。ConstrainedBoxConstrainedBox 主要用于对子组件进行额外的约束，比如，约束子组件的最小高度：class ConstrainedWidget extends StatelessWidget{ @...

内边距与 CSS 一致，Flutter 都是使用 Padding 来表示元素的内边距。定义：Padding({ ... EdgeInsetsGeometry padding, Widget child,})EdgeInsetsGeometry 是一个抽象类，在实际应用中，使用的是 EdgeInsets 类来表示 padding。EdgeInsets在 Flutter 中，...

层叠布局层叠布局，就像 CSS 中的绝对定位，子组件可以根据父组件的位置来确定自身的位置。在 Flutter 中使用 Stack 和 Positioned 这两个组件来实现层叠布局。其中，Stack 允许子组件堆叠，而 Positioned 用于根据 Stack 的空间来定位。Stack说一句直白的话：Stack 就是 Positioned 定位的参考系！！！来看定义：Stack({ ...

在前面讨论到的所有布局容器里面，都没有考虑元素溢出的问题，比如：Row( children: <Widget>[ Text('jonas'*100) ],);显然，一行肯定无法显示下这么长的文本，然而，Row 给出的处理方式是 —— 抛出错误！Flex 、Row 、Column 都存在这样的问题，所以，如果需要考虑溢出场景的时候，应该使用流式布局组件 Wrap...

弹性布局弹性布局，不是 Flutter 特有的一种布局方式，在前端的各个领域中都存在，比如浏览器端通过 flex 来实现弹性布局。在 Flutter 中，主要通过 Flex 和 Expanded 来实现弹性布局。FlexFlex 组件可以沿着水平或垂直方向排列的子组件，如果你明确了主轴的方向，那么更加应该使用 Row 或 Column 来代替 Flex。 因为，它们都是继承自 Flex ，...

线性布局所谓线性布局，就是指沿着水平防线或垂直方向排列子组件的局部方式。在 Flutter 中，主要通过 Row 和 Column 这两个组件来实现线性布局。Row 和 Column 都是继承自 Flex（后面文章介绍）。对于线性布局而言，具有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴就是指垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。Ma...

Material 组件库提供了 Material 风格的单选开关 Switch 和复选框 Checkbox，虽然它们都是继承自 StatefulWidget ，但是他们本身不会保存选中的状态，而是将这个状态交给父 Widget 来维护。当 Switch 或 Checkbox 被点击时，会触发他们的 onChange 回调，然而，我们就可以在这个回调中来维护状态。下面看一个示例：定义一个有状态的...

在 Flutter 中，提供了 Image 组件来描述图片组件，Image 的数据源可以是静态文件、内存以及网络。在 Image Widget 中，有一个必须的属性 image，它对应的是一个 ImageProvider 。ImageProvider 是一个抽象类，主要定义了图片数据获取的接口 load()，从不同的数据源获取图片需要实现不同的 ImageProvider。从 asset 中加...

在 Material 组件库中，提供了很多种基础按钮：RaisedButton、FlatButton、OutlineButton 等，它们都是直接或间接对 RawMaterialButton 组件的封装，所以他们的大多数属性都和 RawMaterialButton 一样。另外，Material 组件库中的按钮都有两个特征：按下时都会出现水波动画。都有一个 onPressed 属性来设置按钮...

Text 组件用于显示简单样式文本，它包含一些控制文本显示的属性。其中，它有一个必须的参数，就是文本字符串。void main(){ runApp(MyApp());}class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp...

响应式开发框架中都会有一个永恒的主题 —— 状态管理。在 React 或 Vue 中，都有对应的状态管理框架：Redux 和 Vuex。那么，作为同样的响应式框架，Flutter 呢？StatefulWidget 的状态应该由谁来管理呢？官网就这个问题给出了以下建议：如果状态是用户数据，如复选框选中的状态、滑块的位置，则该状态最好由父 Widget 来管理。如果状态是关于 UI 界面的渲染，...

为理解一个 Widget 的生命周期，下面先来看一个计数器示例：//定义一个有状态的组件class CounterWidget extends StatefulWidget{ final int initValue; const CounterWidget({Key key,this.initValue:0}); @override State<StatefulWi...

概念Flutter 是面向 Widget 开发的移动端 UI 框架。Widget 可以理解为控件或者组件。它不仅可以表示 UI 元素，也可以表示一些功能性的组件。在 Flutter 中，Widget 的功能是描述一个 UI 元素的配置数据。 也就是说，Widget 其实并不是表示最终绘制在设备屏幕上的元素，它只是描述显示元素的一个配置数据！！实际上，Flutter 中真正代表屏幕上显示元素...

简介Flutter 是 Google 推出并开源的移动应用开发框架，主要的特点是：跨平台与高性能。Flutter 提供了丰富的组件、接口，它还具有一个跨平台的自绘引擎。但是，由于 Flutter 是基于 Dart 语言开发的，并且缺乏学习资料，从而导致学习的成本非常高。Flutter 框架的结构大致可分为两块：​​​​Flutter Framework这是一个纯 Dart 实现的 SDK...

布局组件布局组件是指包含一个或多个子组件的组件，不同的布局组件对子组件的排列方式不同。在前面的文章有提到，Element 树才是最终的绘制树，它是由 Widget 树来创建的，Widget 只是 Element 的配置数据。在 Flutter 中，根据 Widget 是否需要包含子节点将 Widget 分为三类，分别对应三种 Element ：Widget对应的 Element用...

简述在 Flutter 中，提供了 Form 组件用于表示表单，它可以对输入框进行分组，然后统一进行一些操作，可以进行数据校验，输入框重置等等。从定义来看，Form 继承自 StatefulWidget ，它对应的状态类为 FormState ，先来看定义：Form({ @required Widget child, bool autovalidate = false, Will...

在 Material 组件库中，提供了 TextField 和 Form 分别来表示输入框和表单。TextFieldTextField 用于文本输入，它提供了很多属性，先来看它的定义：const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration dec...