Weniner

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子SafeArea 用于填充类似于刘海屏、异形屏之类的屏幕的边距, 在其中加入 padding . 保证多端多设备中展示不受影响. 同时, 这样操作也可以保证在多数情况下. 跨平台多端设备ui保持一致. SafeAreaSafeArea 参数包括:其中 left、top、right、bottom 代表着四周是否需要有安全距离. minimum 代表着最小填充距离, maintainBottomViewPadding 代表着是否需要底部视图填充, 这几个参数构成了 SafeArea 可以隔离异形屏导致的 ui 问题. 实际上 SafeArea 也是一个 StatelessWidget , 它本身也不用主动去更新 ui . 它做的仅仅是包裹了一层 Padding 和 MediaQuery.removePadding. 可能大家会疑惑, 这怎么增加了 Padding 又 remove 了 Padding 呢? 实际上此 Paddin ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引言AspectRatio 可以根据具体的长宽比约束 child 的布局范围, 从而影响 child 的大小. 通常在视频、图像中会经常使用, 今天我们来分析一下它的实现原理. AspectRatioAspectRatio 的参数只有 key、aspectRatio、child. 它会根据 aspectRatio 去重计算约束 child 的布局范围.我们举一个例子: 123456Center( child: AspectRatio( aspectRatio: 1.0, child: Image.network('xx'), ),) 以图片长宽比3:2为例子 当 aspectRatio 为1.0时:由于图片的比例大于 1.0, aspectRatio 取 1.0 时, 以屏宽为基准, 1:1为比例, 构建了一个正方形的布局约束范围. 当图片比大于 1.0 时, 图片以屏宽为图片宽, 而图片高 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引语SizedBox 是 Flutter 中较为常见的组件之一, 往往用于占位、描述控件尺寸等等. 本文将详细带你了解 SizedBox 在内部做了些什么? 命名方法除了本身的构造函数外, SizedBox 一共有 4 个命名方法, 它帮助我们更加便携的构建 SizedBox 对象. 我们用一个表格来简述它们的功能: 名称 width height 描述 SizedBox.expand double.infintiy double.infinity 在其父组件允许的范围内, 尽可能的大 SizedBox.shrink 0.0 0.0 在其父组件允许的范围内, 尽可能的小 SizedBox.fromSize size.with size.height 根据传入的 size 创建一个盒子 SizedBox.square dimension dimension 根据传入的 dimension 创建一个长宽相等的 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 在 Flutter隐藏组件之Visibility和Flutter 组件分析之Opacity 中, 我们介绍了两种 Flutter 隐藏组件的方式, 实际上我们也可以通过 Opacity 来隐藏 widget. 它是一种可以控制组件透明度的方式来控制组件的展示. 以下我们来分一下 Opactiy . OpactiyOpacity 可以对任意的 child 作透明度变化, 因此它也可以隐藏或者显示 child. 它的构成很简单:主要是通过参数 opacity 控制 child 的透明度效果. alwaysIncludeSemantics 则是与语义相关, 也就是无论 child 是否透明, 都会拥有该语义. 我们的重点也就是在 opacity 上. 这里通过一个示例:图左是原图 , 图右是 opacity = 0.5 时的效果. 如果我们通过 Stack 布局, 将 Image 置于上层 , 将一个 100*100 的色块 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 在 Flutter隐藏组件之Visibility 中, 我们介绍了关于 Visibility 的一些能力. 其中 maintainState 为 true 的时候会在 child 外添加一层 Offstage. Offstage 除了隐藏控件外, 还可以维护控件的 state. 本期我们就来分析一下 Offstage. offstageOffstage 是一个使用非常简单的组件, 它用于组件的隐藏. 当 offstage 为 true 时, child 不占用父空间, 也不绘制, 也不会被手势命中. 而为 false 时, 则一切正常. 12345678Offstage( offstage: true, child: Container( height: 100, width: 100, color: Colors.yellow, ),) 它是一个继承于 Single ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引言如果你想要隐藏 Widget , 那么 Visibility 应该是 Flutter 中最为有效的控件之一了. 本文将向你介绍它的用法和原理. 用法Visibility 参数包括 replacement、visible、maintainState、maintainAnimation、maintainSize、maintainSemantics、maintainInteractivity . visible 与 replacement实际使用中, 最多的是 visible . 当为 false 时, 即隐藏当前 widget , 显示 replacement . 而为 true 时, 则显示当前 widget. 在其他参数不变时, visible 与 replacement 的关系就像是精灵宝可梦. 根据 visiable 的属性决定是用 child 还是 replacement 显示在屏幕上. 值得一提的是, 这时切换 vi ...

管理对象太多? 刷新管理太麻烦 ? Flutter刷新范围控制不好 ? 不妨看看本文 , 希望提供给你一些思路吧 ! 引子说起 Flutter 刷新, 你的第一印象是什么 ? setState ? 是的, 只要使用过 Flutter 的人, 第一印象都必然是 setState , 但是由于 setState 滥用的问题, 性能问题就脱颖而出. 因此产出了诸如 Fish_redux 之流, 这些框架尽可能的使用 StatelessWidget 而由框架本身来引导刷新. 那么, 我们除了框架, 有没有办法来控制 Flutter 的刷新呢? ValueListenableBuilderValueListenableBuilder 是基于 Flutter 自身特点构建的一个 widget. 它借助了观察者模式 , 高效率的引导 Flutter 框架来刷新指定位置. 在繁杂的界面中, 细粒化的更新特定的 widget. 我们接下来, 举例子并分析一下它是如何用,怎么做的吧! 如何用这里我们通过一个简单的例子 - 计数器, 它的作用是每点击一次按钮, 数字便会增加一. 12345678 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子Align 是老生常谈的组件之一, 提到它. 大家首要印象肯定是这是一个控制对齐方式的组件. 确实, 我们从它的属性也可知道一二. alignment、widthFactor、heightFactor无一不再说明,它对控制对齐方式这一块似乎颇有建树.本文希望由浅入深, 更深层次的挖掘其内部的可能性. 从Alignment谈起Alignment 简单来说像是一个坐标系,它将复杂的父控件的约束范围描述为中心为原点, 以左右为 x 轴, 上下为 y 轴的坐标系. 在接触边的时候便为单位坐标.我们取的原点其实就是 (0,0) , 左上角就是 (-1,-1) … 这样一来, Align 便有了定位任意位置的特性. 如果大家有写过 Android 的绝对布局, 那么对此应该是感触极深的. heightFactor、widthFactor是什么这两个属性将 Align 的宽高设置为子控件的宽高乘上系数, 取值只要是非负数即可. 也就是说 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展. 适宜人群: 入门 引子本次讲解的是 Flutter 组件中的 Padding , Padding 往往不会直接使用. 更多的情况是使用 Container 作为容器, 而 Padding 组件提供了 margin 、 padding 的功能.那么, padding 作为边距提供者. 本身作了哪些处理以至于可以增加组件的内外边距. 接下来, 让我们一同分析分析 Padding作为常用的边距组件, 内部有哪些实现吧! 用法首先, 我们创建一个如下结构的 Padding 组件结构很简单, 一个大点的蓝色包裹着小一点的橘色色块. 结果如图: 在图片中, Padding 实际上就是蓝色部分. 我们可以通过 Layout Explorer 分析一下它的结构. 可以看出, 整体上与我们在代码中描述的结构一样. 内部的 SizedBox 为 100*100 的盒子, 四周分别有10的间距. 也就是说 Padding 这一层级实际上占用的大小为 120*120 ...

在开发Flutter的过程中, 有没有遇到过这样一种场景. 公司是自定义的 Flutter Sdk 而自己用的又是另一套 Flutter SDK. 又或者你想同时体验 beta 和 stable 版本? 这时候就需要一个多版本点管理助手协助啦~ 而fvm也顺势而生. 本教程基于: macos fvm 2.3.1 android studio 如果有其他系统, 请参考该文档 官方教程 1.开始1.1 安装首先, 我们需要先检查下本地是否有 brew 工具, brew 工具会帮助我们安装、卸载管理 Fvm 工具. 我们可以通过 brew –version 命令检查下本机是否有 brew 工具. 如果出现如下图样式, 我们就可以进行下一步了~ 如果提示没有安装, 那么我们需要先安装 brew工具: 1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装完后执行上述步骤. 1.2 检查在安装完后, 通过 brew list ...