Weniner

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引语AnimatedAlign 是一个隐式动画的组件，当我们的对齐方式发生改变的时候。 就会执行移动的动画， 帮助我们更快的构建界面。 那么如此使用简单的组件内部是如何实现的呢？ AnimatedAlignAnimatedAlign 继承于 ImplicitlyAnimatedWidget , 具体变化的逻辑都在ImplicitlyAnimatedWidget 中已经实现, 而 AnimatedAlign 则是负责实现具体的参数计算以及界面布局等等。 这就相当于帮我们实现了一个 AnimationController ， 我们仅仅需要告诉 widget 变化的始末即可。 在 AnimatedAlign 中，除了允许修改 alignment、heightFactor、widthFactor 这些默认的 Align 的参数外，也允许修改 duration、curve 。通过这些参数就可以更改动画的曲线 Animated ...

引语Draggable 是 flutter 中随手试拖动的一个控件。既然它可以支持多点触碰并且同时可以支持拖拽，那么不由猜想是不是由点击事件获取锚点随后创建 overlay ，但是事实真的是这样吗？让我们深入源码来看看官方给出的答案！ Draggable简单看一下 Draggable 的传参 1234567891011121314151617const Draggable({ Key key, @required this.child, @required this.feedback, this.data, this.axis, this.childWhenDragging, this.feedbackOffset = Offset.zero, this.dragAnchor = DragAnchor.child, this.affinity, this.maxSimultaneousDrags, this.onDragStarted, this.onDraggableCanceled, this.onDragEnd, this.onDragCom ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引语OverflowBox 允许 Widget 超过限制的范围去绘制, 它对子 Widget 的约束和其从父 Widget 获取的约束不同, 可能是允许子部件超过父部件大小. OverflowBoxOverfloewBox 最简单的用法就是嵌套在需要突破父约束的子 widget 外部. 通过一个示例, 你可以进一步感受到它的功能. 我们实现如下代码: 123456789Container( height: 100, width: 100, color: Colors.blue, child: Image.network( imageUrl, height: 200, ),) 我们创建了一个100*100 限制的 Container , 并且放入了一个高 200 的图片. 结果如图: 我们发现实际上图片并没有按照我们的设定的高度展示, 仅仅按限制的大小自行缩放 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引语MediaQuery 想必大家或多或少都接触过, 我们想要知道屏幕尺寸、状态栏高度、 底部间距、屏幕分辨率等等信息都需要借助 MediaQuery 这个媒介. 之所以 MediaQuery 可以这么方便的提供信息, 一切都是因为它是一个 InheritedWidget . InheritedWidget 是什么? 它可以有效的在树上传递信息. 往往都是子节点向上查找时, 去获得信息. MediaQuery 正是这样的一个信息处理体, 接下来我们就来分析一下它. MediaQuery在 MediaQuery 中, 提供着这样三个命名构造方法: removePadding 删除边距 removeViewInsets 删除视图重叠部分边距 removeViewPadding 删除视图的边距 从这三个命名方法, 我们也可以大致了解到其中改变比较多的无非是三个属性: padding、viewPadding、viewInsets ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引语LayoutBuilder 通常用于构建一个依赖于父 widget 大小的 widget 树. 换句话来说, 就是父对象约束子对象大小并且不依赖子对象的大小. LayoutBuilder本次, 我们从源码出发结合实例看一下 LayoutBuilder 的实现. LayoutBuilder 基于 ConstrainedLayoutBuilder 实现. ConstrainedLayoutBuilder 基于 RenderObjectWidget 实现. RenderObjectWidget 中提供了 RenderObjectElement 以及 RenderObject 的创建. 在 ConstrainedLayoutBuilder 中, 帮助我们创建了 RenderObjectElement . 所以在 LayoutBuilder 中, 我们仅负责 RenderObject 的创建. 可以看到最终 RenderObject ...

引子ConstrainedBox 是 Flutter 中用于组件范围约束的盒子, 我们最早在 Container 中提过有关于 ConstrainedBox 的运用. 实际使用中, 往往有更多的使用场景需要用到 ConstrainedBox . 例如在 dialog 中需要设定 dialog 的最大值和最小值. ConstrainedBox那么, ConstrainedBox 是怎么达成限制子布局大小的目地的呢? 这里可以在 ConstrainedBox 源码中找到答案. 我们都知道 Flutter 有三棵树的存在, 这里的重中之重便是 RenderObject , 因为它是整个渲染的根基. 我们也关心一下 ConstrainedBox 的 RenderObject 是怎么实现的吧? RenderConstrainedBox在 RenderConstrinedBox 中, 它通过重写 compute 开头的一系列, 定义了盒子的整体大小区间. 然后通过 perfomrLayout 去真正的布局界面. 就让我们一起来看看它的实现吧! performLayout在 RenderCons ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子Banner 主要是一些提示性的文案, 往往被用于在 debug 模式或者在 assert 中用于信息的提示. 之所以介绍这个组件呢 ~ 是希望给大家日常开发中带来一些小思考和灵感. 毕竟谁也不知道设计的下一步思路是什么 ~ Banner这里简单通过一个示例看一下大致的 ui , 方便大家对后续的讲解有个概念性认识. 123456789Banner( location: BannerLocation.bottomEnd, message: 'banner', child: Container( height: 100, width: 100, color: Colors.blue, ),) 这里我们通过 location、message 两个必填属性来简单写一下 Banner . location 的话即在 child 中的相对位置, m ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子在 Flutter 组件分析之AbsorbPointer 一文中, 我们分析了关于手势事件的传递和处理, 并且我们知道了 AbsorbPointer 是手势拦截的 widget 之一. 除此之外, 还有哪些 widget 可以拦截手势呢? IgnorePointer 便是这样的组件, 它同样用于手势的拦截, 本身可以忽略手势的命中. 它与 AbsorbPointer 的区别在于: IgnorePointer 自身不会去参与命中测试, 但是 AbsorbPointer 自身会参与手势命中测试. IgnorePointerIgnorePointer 的参数由 key、ignoring、child、ignoringSemantics 构成.其中, ignoringSemantics 将会决定是否忽略当前节点的语义. ignoring 决定了是否忽略当前手势事件. 它与 AbsorbPointer 一样都提供了 updateRen ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子AbsorbPointer 是有关于手势拦截的 widget 之一. 首先, 我们要了解一个概念, 手势的传递是由上而下的. 换句话来说, 在上层拦截了手势, 下层的 widget 也就收不到手势相关的信息了. AbsorbPointer 在 Flutter 中正是扮演着这样的角色, 它在上层拦截了手势后将不会传入它的 child 部分. 但是 AdsorbPointer 本身对于手势是可见的. AbsorbPointerAbsorbPointer 的参数由 key、absorbing、child、ignoringSemantics 构成.其中, ignoringSemantics 将会决定是否忽略当前节点的语义. 重点在于 absorbing, 这个参数决定了是否吸收手势事件. 我们通过 AbsorbPointer 的处理方式, 来看看它是如何在不隐藏 ui 的情况下, 去忽略手势事件的吧~ RenderAbsorbPoi ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子Divider 是 Flutter 中的分割线组件, 在 ui 上显示为一条横向的分割线, 与此相像的是 VerticalDivider , 它是一条竖向的分割线. 无论在列表或者 markdown 中, 分割线的使用往往都占据着很大的使用空间. Divider说起 Divider、VerticalDivider , 这二者无论实现还是参数都差不多. 因此我们通过 Divider 来讲解下二者的用法和实现. Divider 有如下参数:其中, color 不用说, 代表着分割线的颜色. height 表示这条分割线大绘制范围. thickness 表示这条分割线大绘制粗细. indent、endIndent代表分割线前后的间距. 通过这些参数可以构建一个相对灵活的分割线. 构建Divider 的构成实际上是通过多个 widget 组合最后生成的一个总 widget. 它通过 SizedBox 决定了 Divider 所占据的 ...