随笔分类 -  flutter

摘要：一、缓存页面 比如 Tab 切换，旧的 Tab 可能被销毁，我们需要做缓存。 解决方法：如果是 PageView 可以更改 allowImplicitScrolling 值为 true，会缓存前后各一页。 其它组件，可以实现 AutomaticKeepAliveClientMixin 接口。 注：T 阅读全文

摘要：效果 有点类似 flexibleSpace，但是 flexibleSpace 的 expandedHeight 得预留计算出来。这里的头图的大小可以自适应，不用显式设置 expandedHeight。 注：最新版本可以使用 SliverMainAxisGroup 实现相关需求（存疑？） 代码 注：请 阅读全文

摘要：SliverAppBar 的滚动布局 特殊属性说明 primary: true 不同于 AppBar 通常有 Scaffold 包裹，其最大高度由父类约束。SliverAppBar 完全由自身决定。 当 primary 等于 true 时，其 topPadding 等于状态栏高度；若为 false， 阅读全文

摘要：AppBar 的高度与 PreferredSizeWidget 通常可以观察到 Scaffold.appBar 与 AppBar.bottom 属性，要求其值必须是 PreferredSizeWidget（典型的是 AppBar 与 TabBar 组件）。 abstract class Prefer 阅读全文

摘要：效果 此效果参考自 twitter 与 gmail 实现原理 通过 Stack 组件，在最上层页面的状态栏位置用一个白色的容器占位，在列表滚动时，根据监听到的滚动位置动态调整其透明度。 PS：也可以借助 AppBar 实现，只要设置 Scaffold.extendBodyBehindAppBar 等 阅读全文

摘要：scaffold 中 body 的 初始位置 通常 body 内容的初始滚动位置位于状态栏或导航栏之下。但某些情况下需要调整初始位置： 具体分以下几个情况讨论： 1、对于非 ListView 组件 ① 在AppBar 不存在时，亦即状态栏未被 AppBar 占用： body 会占满状态栏，跟 ② 中 阅读全文

摘要：一、布局模型 主要有两种布局模型： ① 基于 RenderBox 的盒模型布局。 ② 基于 Sliver ( RenderSliver ) 按需加载列表布局。（Sliver 布局请看） 两种布局方式在细节上略有差异，但大体流程相同，布局流程如下： 上层组件向下层组件传递约束（constraints） 阅读全文

摘要：本地化 略（建议配合 get_cli 相关命令使用） 更新 locale var locale = Locale('en', 'US'); Get.updateLocale(locale); 获取系统的 locale return GetMaterialApp( locale: Get.device 阅读全文

摘要：路由 基础方法 Get.toNamed("/NextScreen"); Get.offNamed("/NextScreen"); Get.offAllNamed("/NextScreen"); 路由传参 Get.toNamed("/NextScreen", arguments: 'Get is th 阅读全文

摘要：简单状态管理器 GetxController 有一个 update 方法，用于触发更新操作。 类似于 ChangeNotifier 中的 notifyListeners 方法 源码 abstract class GetxController extends DisposableInterface w 阅读全文

摘要：一、CustomScrollView 的作用 创建一个公共的 Scrollable 和 Viewport ，然后它的 slivers 参数接受一个 Sliver 数组 二、常用 Sliver 组件对照表 滚动 sliver Sliver名称功能对应的可滚动组件 SliverList 列表 ListV 阅读全文

摘要：路径动画 示例： 代码 //路径动画 var path = Path() ..moveTo(50, 50) ..lineTo(100, 100) ..lineTo(200, 90); var rect1 = Rect.fromCircle(center: Offset(80, 450), radiu 阅读全文

摘要：基础介绍 实现自定义组件大致有三种方式，第一种是组合现有的组件；第二种是直接构建 RenderObject，比如 ColoredBox 组件；第三种就是下面介绍的，CustomPaint，它与第二种类似，都是通过 canvas 去绘制图形。 坐标 （注意Y轴正方向是向下，数学中是向上） Custom 阅读全文