趁手利器,FSuper

现在,我需要向你隆重介绍,可能即将在你的 Flutter编程之路中,令你爱不释手的 趁手利器之一 —— F...Super

FSuper【阿里巴巴-飞猪-Fliggy Android Team 技术团队】开发的 FWidgets系列组件之一。是由 Github 2.8k+ star 项目 《SuperTextView》作者 CoorChice操刀制作开发的 Flutter组件。

它能够助你十分便捷的实现诸多视觉效果。

它所支持的布局方式能够轻松拆解构建绝大部分复杂布局。

它让好,更好一点!

✨ 特性

来看看 FSuper为你带来些什么?

  • 丰富的 边角效果

  • 精美的 边框装饰

  • 天然支持精彩的 富文本

  • 渐变效果也不在话下

  • 更具空间感的 阴影

  • 不简单的 小红点

  • 灵活且强大的 相对位置布局

🛸 传送区

【传送门:FSuper Github 主页 - 感谢您的 Star 🌟】

【传送门:FSuper Documentation】

🔲 边角

随心所欲,彰显个性。

FSuper支持灵活、丰富的边角设置。圆角、斜角、1个、2个、..,你大可随心所欲。

仅需两个属性 cornercornerStyle,就能构建各种千奇百怪的边角效果。

🖼 边框

简单一点,再简单一点。

FSuper添加边框,足够简单。

只需 strokeColorstrokeWidth属性搭配,即可立即获得令人满意的边框装饰效果。即使是再加上边角效果,同样也足够简单。

📝 富文本

浑然天成,一步到位。

FSuper天然支持了直接配置富文本效果,而无需开发者增加而外的组件。一切都在 FSuper中完成。

FSuper(
  // #1
  text: "En.. ",
  spans: [
    // #2
    TextSpan(
        text: "FWidget",
        style: TextStyle(
          color: Color(0xffffc900),
          backgroundColor: Colors.black38,
          fontSize: 20,
        )),
    // #3
    TextSpan(text: " are really "),
    // #4
    TextSpan(
        text: "delicious",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 20,
          fontStyle: FontStyle.italic,
        )),
    // #5
    TextSpan(text: "!"),
    // #6
    TextSpan(
      text: "\nYou can try to ",
    ),
    // #7
    TextSpan(
      text: "click here",
      style: TextStyle(
        color: Colors.redAccent,
        fontSize: 18,
        decoration: TextDecoration.underline,
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.wavy,
      ),
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          _showDialog(
              context, "YA! How dare you clicked me?");
        },
    ),
    // #8
    TextSpan(text: " !"),
  ],
),

FSuperFlutter所提供的富文本支持进行了精巧的融合,使得在兼具 FSuper所提供的一切能力的前提下,不用引入新的组件,而能够支持富文本。这真是太棒了👏!

🧡 渐变效果

色彩够多,才够出彩。

通过 gradient属性,你可以直接为 FSuper直接配置 LinearGradientRadialGradientSweepGradient等多种渐变色背景效果。

FSuper在削减层级嵌套上,始终是一把利器。

🔳 阴影

要多立体,都行!

FSuper通过简单的 shadowColorshadowBlur属性即可控制组件阴影的颜色、大小。

代码虽然的简单,但是立体效果绝对不简单。

🎈 小红点

内藏玄机,妙不可言。

FSuper能够让小红点在你的应用中大放异彩。关于小红点位置确定的相关计算,由 FSuper完成。你只需要关注你需要什么就够了。

这是显而易见的改变,从此构建小红点不在话下。

🧸 相对位置布局

再复杂,也简单。

FSuper支持配置多达两个子组件 child1child2,你可以通过相对位置描述来定位它们。这让很多不易构建的效果,变的简单清晰。

FSuper能够聪明的确定自身内容区域大小,进一步根据你对子控件的相对位置配置,确定它们相对于内容区域的位置。这能解决很多问题。

特别是当你无法知道内容区域大小,而子控件又需要上居中对齐,或其它一些对齐方式时,你需要额外创建很多组件来嵌套,以构建出这种相对位置的效果。有时,你甚至不得不需要对绘制进行监听,以便在拿到主要尺寸后,进一步确定位置关系。

FSuper能够阻止这些问题出现在你的面前,一切都将变的足够简单。

在不使用 FSuper情况下,组织图中 【Warning】视图是比较困难的。除了需要额外增加组件嵌套,你很难在内容区域大小不确定的情况下来确定诸如 centerLeftcenterRight、.. 等对齐效果。更不用说需要对齐的所有组件的大小都不确定的情况了。

FSuper使得这样的布局易于构建。如果一个 FSuper不够,你甚至可以将一个 FSuper作为另一个 FSuper的子组件。

FSuper(
  child1: FSuper(
    child1: FSuper(),
  ),
  child2: FSuper(
    child1: FSuper(
      child1: FSuper(),
    ),
  ),
)

这看起来可能很朋克!但它确实管用。

上图中的效果,均由 FSuper构建。

😃 如何使用?

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

🌐 pub 依赖方式

dependencies:
  fsuper: ^<版本号>

</版本号>

⚠️ 注意,请到 pub获取 FSuper最新版本号

🖥 git 依赖方式

dependencies:
  fsuper:
    git:
      url: 'git@github.com:Fliggy-Android-Team/fsuper.git'
      ref: '<分支号 或="" tag="">'

</分支号>

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

感觉还不错?请到 《FSuper》的 Github 主页投出您认可的一个 Star 🌟 吧!

原文链接:juejin.im

上一篇:从前浪漫的联调时光,现在回不去了
下一篇:疫情期间,写的两个场景

相关推荐

  • 自建faas利器之安全运行环境

    书接上文 上次谈到了如何搭建自己的faas?,被同行评论有些标题党,这篇文章将接着上文,来介绍一些干货。同时在写这篇文章的时候,核心功能vmbox已经开源,欢迎大家点赞fork。

    5 个月前
  • 探索Greenplum的实践,了解新一代大数据处理利器

    作者:李树桓 个推数据研发工程师 前言:近年来,互联网的快速发展积累了海量大数据,而在这些大数据的处理上,不同技术栈所具备的性能也有所不同,如何快速有效地处理这些庞大的数据仓,成为很多运营者为之苦恼...

    2 年前
  • 手机H5 web调试利器——WEINRE (WEb INspector REmote) 安卓手机

    调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/devices 安卓真机调试,不过这个要求比较高: 首先,...

    1 年前
  • 开发利器(补充中)

    Charles 进到cmd命令 输入ipconfig 查看自己的电脑ipv4地址(所连网络的ip,而非其他网络的ip),将手机和电脑连接同一wifi网络,将手机wifi进行设置如图 clipbo...

    2 年前
  • 帮助快捷方便的搜索利器:idocs

    还在为看文章、文章时遇到需要search的时候步骤太麻烦而烦恼?idocs maybe help~👏👏👏 idcos是一个chrome小插件,帮助在浏览的时候快速查找内容。

    1 年前
  • 在线代码编辑器利器-codeMirror

    说明 codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,做一个记录。 官网(https://codemirror.net/) github地...

    1 年前
  • 动画利器-lottie在懂表帝App中的实战应用

    需求分析 最近公司项目需要在懂表帝App中内嵌H5活动页,其中有一个开宝箱的动画(如下图): 效果图(/public/upload/cab8ed3a338f75f97436ab89707bc045...

    2 个月前
  • charies的使用 (前端模拟后端接口数据利器)

    安利一波前端开发工具利器charies的使用 直接上正题 使用charies把对后端接口的请求映射到本地文件上,这样没有后端的接口也不影响自己的开发啦。 如图进行使用: 点击tools ma...

    1 年前
  • [翻译]map和reduce,处理数据结构的利器

    原文地址:https://codeburst.io/writingjavascriptwithmapreduce980602ff2f2f(https://codeburst.io/writingja...

    2 年前

官方社区

扫码加入 JavaScript 社区