FWidget 用心提供精致的组件，助您构建精美的应用。html

你好开发者，来见识一下，这是由咱们精心为开发者烘培 🍩 的全新组件，F～～～Float。git

FFloat 是由 【阿里巴巴-飞猪-FliggyMobile 技术团队】 开发维护的 FWidget 系列组件中的第 5 个成员。github

正如咱们的 Slogan："用心提供精致的组件，助您构建精美的应用。"算法

咱们正在用心的尝试雕琢出一套好用的精美的组件，来帮助开发者们更易构建出 Beautiful App。bash

在过去的几周中，咱们已经陆续向社区开放了 4 个精致的基础功能性组件，收到了来自开发者们投出的 333 个 Star，很是感谢开发者们的承认和支持 🥰。markdown

现在，咱们迎来了 FWidget 的第 5 个成员， FFloat 。ide

FFloat 的诞生，来源于咱们平常开发中一直棘手的 浮动元素 问题。函数

咱们几乎很难计算出，在 FFloat 出现之前，当须要开发以下交互元素时，咱们的焦虑能让咱们喝掉几罐可口可乐🥤oop

固然，就这个例子🌰而言，算是十分简单的 浮动元素 示例了。ui

FFloat 的出现，将会让一切的难题都迎刃而解。

如今，时间点将会分为两个部分， FFloat 出现前 和 FFloat 出现后 。

FFloat 在化简为繁方面是天生的好手。

这得益于咱们在 FFloat 内部进行了大量繁琐的逻辑处理和计算，使得开发者在使用时，可以以最天然的，最简单的方式去 还原创造 。

✨ 特性

这是 FFloat 为开发者们带来的一些特性：

同时支持 锚点模式 和 绝对模式 双定位模式
够灵活，够简单的 位置控制
支持配置 背景遮罩
自带 精美动效 ，可以根据位置关系智能调整
丰富的 装饰三角 配置
外层容器支持 圆角、边框、渐变、阴影 等诸多配置
便捷的 显示/隐藏控制

🛸 传送区

🛸 【传送门：FFloat Github 主页 - 感谢您的 Star 🌟】

📖 【传送门：FFloat 文档】

📍 基于锚点元素的位置控制

足够简单，足够有效

FFloat(
  /// 浮动元素内容
  (setter) => createContent(),
  alignment: _alignment,
  margin: _margin

  /// 锚点元素
  anchor: buildAnchor(),
)
复制代码

FFloat 最难以想象的地方在于，开发者只须要经过 anchor 参数提供一个锚点， FFloat 就能知道如何在正确的地方显示 浮动元素。

并且 FFloat 不会对本来的锚点元素及可见视图树结构产生任何不利影响，这很神奇吧！

对于所要展现的内容， FFloat 经过 FloatBuilder 函数来构建。开发者只须要在该函数中返回须要展现的浮动内容，剩下的事情， FFloat 会处理好。

此外，在 FloatBuilder 函数中，开发者可以经过函数的参数获取到刷新函数 StateSetter ，这样能够将刷新范围限制在浮动内容区域中，而不是去刷新整个页面区域。这对于构建一个精美丝滑的应用来讲，相当重要。

FFloat(
  (setter){
    return FButton(text: _text, 
      onClick: (){

        /// 更新浮动内容
        setter((){
          updateText();
        })            
      });
  },
  ...
)
复制代码

若是对浮动元素出现的位置不满意， FFloat 提供了 alignment 和 margin 参数，使开发者可以以难以置信的简单的方式调整浮动元素的位置，直到满意为止。

alignment 提供了十分全面的相对位置选项：

类型	说明
topLeft	在锚点元素【上方】，且【左边缘】与锚点元素对齐
topCenter	在锚点元素【上方】，且水平居中
topRight	在锚点元素【上方】，且【右边缘】与锚点元素对齐
bottomLeft	在锚点元素【下方】，且【左边缘】与锚点元素对齐
bottomCenter	在锚点元素【下方】，且水平居中
bottomRight	在锚点元素【下方】，且【右边缘】与锚点元素对齐
leftTop	在锚点元素【左侧】，且【上边缘】与锚点元素对齐
leftCenter	在锚点元素【左侧】，且垂直居中
leftBottom	在锚点元素【左侧】，且【下边缘】与锚点元素对齐
rightTop	在锚点元素【右侧】，且【上边缘】与锚点元素对齐
rightCenter	在锚点元素【右侧】，且垂直居中
rightBottom	在锚点元素【右侧】，且【下边缘】与锚点元素对齐

在此基础上，margin 参数可以让开发者基于当前的相对位置关系，进一步微调浮动元素的偏移量。

在过去，要实现这些效果，须要耗费开发者大量的精力去处理复杂的位置关系逻辑，编写不一样的算法以肯定浮动元素的最终位置。

而如今，一切就是这么简单 😎。

📌 基于绝对坐标的位置控制

多一种模式，多一种可能

GestureDetector(
  onPanDown: (details) {
    FFloat(
      (setter) => createContent(),
      autoDismissDuration: Duration(milliseconds: 2000),
      alignment: _alignment,
      canTouchOutside: false,

      /// 经过绝对坐标配置浮动元素位置
      location: Offset(details.globalPosition.dx, details.globalPosition.dy),
    ).show(context); /// 显示
  },
  child: FSuper(...),
)
复制代码

在一些状况下，咱们的浮动元素不须要基于一个锚点出现，而是但愿它出如今一个肯定的位置。

若是开发者知道一个这样的位置的话，就可使用 location 参数来设置浮动元素的位置。

此时，开发者彻底不须要将 FFloat 放到视图树中包裹任何的组件元素。这意味着开发者能够随时随地，在任何回调或者函数中建立一个浮动元素。

经过 FFloat.show(context) 和 FFloat.dismiss()，开发者能够随时轻松的控制浮动元素 显示/隐藏 。

而 FFloat 的其它一切配置都依旧有效。

💫 背景遮罩及动效

将效果丰富，将实现简化

# 背景遮罩演示
FFloat(
  (_) => buildSearchWidget(),
  color: Colors.black.withOpacity(0.95),

  /// 配置背景遮罩颜色
  backgroundColor: Colors.black26,
  corner: FFloatCorner.all(20),
  margin: EdgeInsets.only(bottom: 10, left: 10),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.topRight, 
 
  /// 配置点击非浮动元素区域是否隐藏
  canTouchOutside: false,
)
复制代码

在 FFloat 中，只需经过 backgroundColor 一个参数，就能实现浮动元素出现时的背景遮罩效果。

默认状况下，当浮动元素出现时，会拦截全部事件，开发者能够经过 canTouchOutside 这一参数关闭该模式。

# 动效配置
FFloat(
  (_) => FSuper(text: "Surprise😃 !"),
  anchor: buildAnchor(),

  /// 当该参数不为 null 时，FFloat 会在指定时长后自动消失
  autoDismissDuration: Duration(milliseconds: 2000),

  /// 配置动效时长
  animDuration: Duration(milliseconds: 800),
),
复制代码

FFloat 自带精美的交互动效，根据浮动元素位置的不一样，动效可以自动的进行调整，以呈现最优雅的视觉效果。

经过 animDuration 参数，开发者能够自行定义动效时长。固然，若是不须要任何动效，只需传入 null 便可。

在不少场景中，咱们每每但愿一个浮动元素出现后，可以在持续一段时间后自动消失。

一般，要实现这样的效果，开发者须要建立独立的计时器，以及状态机，在特殊的情况下，还须要额外的进行状态逻辑校验，以确保这一效果完美无缺。须要考虑的逻辑实在太多。

而 FFloat 可以让开发者只需经过 autoDismissDuration 一个参数，就可以实现这一功能。

🔺 装饰三角

省力，省心，省内存

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),

  /// 配置装饰三角的相对位置
  triangleAlignment: TriangleAlignment.start,

  /// 配置装饰三角的相对偏移量
  triangleOffset: Offset(10, 10),

  /// 配置装饰三角的宽
  triangleWidth: 20,

  /// 配置装饰三角的高
  triangleHeight: 15,
)
复制代码

在 FFloat 出现以前， Tooltips 风格的浮动元素的实现每每过于繁琐。

而真正难住开发者的倒是浮动元素上的一个 小三角 😲。相信经验丰富的开发者必定知道这背后的心酸。

因为平台系统没有提供三角或带有三角的组件支持，开发者不得不在使用 Canvas 绘制或使用图片替代的方案中做出抉择。

前者灵活高效，但实现十分繁琐，这可不只仅是在 Canvas 上 draw 个三角形那么简单，还须要考虑与真正的浮动元素的融合问题。

后者实现方便，但对于不一样颜色，不一样位置、不一样尺寸的三角，开发者须要为它们配置多套图片，内存也会随时间逐步累加。但考虑到开发成本和效率，开发者们每每都会选择这种实现方式。

FFloat 完全解决了这些问题，兼具高效与灵活，甚至比开发者们的指望更进一步。

在上面的 Code 演示中，展现了 FFloat 在小三角方面的经常使用配置，包括简单的相对位置关系、尺寸、及可微调的位置偏移。

如今，开发者能够清理掉应用程序中全部相似的图片资源了 👏。

除了解决过去的问题， FFloat 更进一步的可以根据浮动元素以及锚点元素的相对位置关系，自动调整自身的三角形到合理的位置。这一过程，对于开发者而言是毫无感知的。

FFloat(
  (setter) => buildContent(),

  /// 配置是否隐藏装饰三角
  hideTriangle: true,
  anchor: buildAnchor(),
),
复制代码

默认状况下，FFloat 会展现装饰三角。若是不须要，开发者只用配置 hideTriangle: true，就能够将它隐藏。

🔆 圆角 & 边框

虽然简单，但不简陋

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.bottomLeft,
  hideTriangle: true,

  /// 加上圆角
  corner: FFloatCorner.all(6),

  /// 加上边框
  strokeColor: mainShadowColor,
  strokeWidth: 1.0,
)
复制代码

在上面的例子 🌰 中，咱们可以清晰的看到，一个漂亮的带边框的圆角浮层，构建起来如此的简单。

FFloat 提供了 FWidget 系列组件一脉相承的，简单的设置圆角的方式，仅仅经过一个简单的 corner 参数就能灵活的配置圆角效果。

与 corner 配套的 cornerStyle 属性，容许开发者随时切换圆角的风格（圆角 or 斜切角）。

对于 FWidget 的老粉而言，相信已经知道，咱们为组件配置边框效果，仅仅须要经过 strokeWidth 和 strokeColor 这样两个简单的属性便可。

咱们的初心始终是，帮助开发者更简单、更高效的构建出精美的应用。

🌔 渐变 & 阴影

要简洁，也要出彩

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  hideTriangle: true,
  alignment: FFloatAlignment.bottomCenter,

  /// 配置渐变
  gradient: SweepGradient(
    colors: [
      Color(0xffE271C0),
      Color(0xffC671EB),
      Color(0xff7673F3),
      Color(0xff8BEBEF),
      Color(0xff93FCA8),
      Color(0xff94FC9D),
      Color(0xffEDF980),
      Color(0xffF0C479),
      Color(0xffE07E77),
    ],
  ),
  
  /// 添加阴影
  shadowColor: Colors.black38,
  shadowBlur: 3,
  shadowOffset: Offset(3, 2),
)
复制代码

是的，FFloat 在兼具了诸多能力以后，仍然对渐变进行了支持。

仅仅是经过一个简单的 gradient 属性，开发者就能得到惊艳的渐变效果。

此外，做为一个现代化的组件，FFloat 固然会对阴影做出支持。

开发者只须要配置 shadowColor 参数就能得到一个基础的阴影效果。

若是想要更进一步对阴影做出调整的，可使用 shadowBlur 和 shadowOffset 参数来完成。

👏 更多的精彩

浮动元素的问题，就让 FFloat 来解决好了，开发者只须要关心如何把应用变得更加精美就够了。

想要了解更多详细内容？请访问 FFloat 官方主页 (PS：别忘了投出一个你承认的 Star 哦 😘)。

😃 如何使用？

在项目 pubspec.yaml 文件中添加依赖：

🌐 pub 依赖方式

dependencies:
  ffloat: ^<版本号>
复制代码

⚠️ 注意，请到 pub 获取 FFloat 最新版本号

🖥 git 依赖方式

dependencies:
  ffloat:
    git:
      url: 'git@github.com:Fliggy-Mobile/ffloat.git'
      ref: '<分支号 或 tag>'
复制代码

⚠️ 注意，分支号或 tag 请以 FFloat 官方项目为准。

足够好用，FFloat

✨ 特性

🛸 传送区

🛸 【传送门：FFloat Github 主页 - 感谢您的 Star 🌟】

📖 【传送门：FFloat 文档】

📍 基于锚点元素的位置控制

📌 基于绝对坐标的位置控制

💫 背景遮罩及动效

🔺 装饰三角

🔆 圆角 & 边框

🌔 渐变 & 阴影

👏 更多的精彩

想要了解更多详细内容？请访问 FFloat 官方主页 (PS：别忘了投出一个你承认的 Star 哦 😘)。

😃 如何使用？

🌐 pub 依赖方式

🖥 git 依赖方式

感受还不错？请到《FFloat》的 Github 主页投出您承认的一个 Star 🌟 吧！

往期组件

足够好用，FFloat

✨ 特性

🛸 传送区

🛸 【传送门：FFloat Github 主页 - 感谢您的 Star 🌟】

📖 【传送门：FFloat 文档】

📍 基于锚点元素的位置控制

📌 基于绝对坐标的位置控制

💫 背景遮罩及动效

🔺 装饰三角

🔆 圆角 & 边框

🌔 渐变 & 阴影

👏 更多的精彩

想要了解更多详细内容？请访问 FFloat 官方主页 (PS：别忘了投出一个你承认的 Star 哦 😘)。

😃 如何使用？

🌐 pub 依赖方式

🖥 git 依赖方式

感受还不错？请到 《FFloat》的 Github 主页投出您承认的一个 Star 🌟 吧！

往期组件

感受还不错？请到《FFloat》的 Github 主页投出您承认的一个 Star 🌟 吧！