全新技能,FDottedLine

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

对于一个 Flutter 开发者而言,要实现下图中的虚线效果可不是一个容易的事情 🤔。

image

由于官方没有准备有关于虚线的 Widget 供开发者们食用。

很多时候,开发者们不得不自己手动绘制或是使用一些特别的方式去实现,但过程总是不那么容易的。

现在, FDottedLine 要来改变目前的状况了。为开发者提供足够优雅的方式,去完成虚线视图的构建。

FDottedLine 被作为由 【阿里巴巴-飞猪-FliggyMobile 技术团队】 开发维护的 FWidget 系列组件中的第 7 个组件,献给社区的开发者们。希望帮助开发者们更易于创建精美的应用程序。

在过去的几周中,已经开放的 FWidget 组件获得了社区开发者们的持续关注,开发者们目前已为其投出了近 800Star

今天,我们为开发者们带来了强大的,支持灵活构建虚线效果的组件 —— FDottedLine

image

✨ 特性

看看 FDottedLine 都带来了些什么改变吧:

  • 同时支持水平、垂直两个方向的虚线

  • 支持创建虚线形状

  • 提供超简单的方式为 Widget 添加虚线边框

  • 支持创建灵活的虚线边角效果

image

🛸 传送区

🛸 【传送门:FDottedLine Github 主页】

📖 【传送门:FDottedLine 文档】

🔩 水平虚线

一贯的简洁

image
FDottedLine(
  color: color,
  width: 160.0,
)

通过 FDottedLine 创建一个水平虚线,异常简单 😱。

停止对虚线视图的恐惧!

⛓ 垂直虚线

换种效果,也同样简单

image
FDottedLine(
  color: color,
  height: 160.0,
)

水平虚线 一样简单。

到这,也许留心的开发者会发现。构建 水平虚线垂直虚线 的唯一差别就是:

当需要构建 水平虚线 时,只需要给 width 参数赋值;而当需要构建 垂直虚线 时,只需要给 height 参数赋值。

天呐,这可太便捷了 😱。

🔹 虚线图形

永远要,不仅如此

image
FDottedLine(
  color: Colors.lightBlue[600],
  height: 100.0,
  width: 50,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

如果给 widthheight 同时赋值,开发者们会惊讶的发现,一个虚线图形出现了。

是的, FDottedLine 不仅仅能够帮助开发者十分简洁的构建一维虚线视图,还能用同样简洁的方式构建二维虚线图形。

🌏 边角

再善变一点

image
FDottedLine(
  color: Colors.lightBlue[600],
  height: 70.0,
  width: 70.0,
  space: 2.0,
  
  /// 设置边角
  corner: FDottedLineCorner.all(50),
)

通过 FDottedLine ,开发者甚至可以创建出虚线图形的边角效果。比如:虚线圆角矩形,虚线圆形..

而且构建起来一贯的简单,仅仅配置一个 corner 参数,就能完成诸多惊人的效果。

🧩 Child

让事情变得简单

image
FDottedLine(
  color: color,
  corner: FDottedLineCorner.all(6.0),
  
  /// 添加 widget
  child: Container(
    color: Colors.blue[100],
    width: 130,
    height: 70,
    alignment: Alignment.center,
    child: Text("0873"),
  ),
)

相信开发者们都深有感受,在过去,想要为一个 Widget 添加虚线边框,是件十分困难的事情。

FDottedLine 会让事情变得空前简单。开发者只需要将自己的 Widget 作为 FDottedLinechild 就完成了所有的工作了。

FDottedLine 的背后,FDottedLine 会帮助开发者计算 Widget 的大小,从而进一步确定应该如何创建正确的虚线边框。

这项工作,为开发者们开辟了一条新的路径。

💡 探索更多乐趣

看看 FDottedLine 都能干些什么!

image

当拥有了如此简单的方式创建虚线,开发者可以自由构建出更多精彩绝伦的视图。

image

接下来关于 FDottedLine 的更多应用,就期待开发者们的探索吧 🔆。

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

😃 如何使用?

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

🌐 pub 依赖方式

dependencies:
  fdottedline: ^<版本号>

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

🖥 git 依赖方式

dependencies:
  fdottedline:
    git:
      url: 'git@github.com:Fliggy-Mobile/fdottedline.git'
      ref: '<分支号 或 tag>'

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

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

更多精彩组件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,607评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,239评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,960评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,750评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,764评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,604评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,347评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,253评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,702评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,893评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,015评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,734评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,352评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,934评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,052评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,216评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,969评论 2 355