FWidgets 用心提供精致的组件,助您构建精美的应用。
嘿,开发者,快停止构建 Old GUI!
如果你有注意到的话,你会发现,我们需要更多的精美的 New GUI!
为帮助开发者能够舒适的构建出拥有精美 GUI 的现代应用程序,【阿里巴巴-飞猪-FliggyMobile 技术团队】 推出了 FWidgets 系列组件。
就在前几天,我们开放了 FWidgets 的第一个组件 《FSuper》,获得了社区开发者们良好的反馈,目前该组件已经获得了来自开发者们投出的 214 个 Star。
FButton 能够帮助你构建丰富多彩的按钮元素,而 FSwitch 将为你提供拥有良好交互的开关元素。
✨ 特性
🧩 FButton
-
丰富的 边角 效果
-
精美的 边框 装饰
-
渐变效果 也不在话下
-
灵活的 图标 支持
-
贴心的 Loading 模式
-
炫酷的交互 特效
-
更具空间感的 阴影
🧩 FSwitch
-
支持打开、关闭的提示
-
支持为 Slider 设置装饰
-
支持灵活的配置可用状态
-
更具空间感的 阴影
-
良好的开关交互体验
🛸 传送区
🛸 【传送门:FButton Github 主页 – 感谢您的 Star 🌟】
📖 【传送门:FButton 文档】
🛸 【传送门:FSwitch Github 主页 – 感谢您的 Star 🌟】
📖 【传送门:FSwitch 文档】
🧩 FButton
🎈 圆角 和 边框
// #1
FButton(
width: 130,
effect: true,
text: "FButton #1",
textColor: Colors.white,
color: Color(0xffFF7043),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(25),
),
// #2
FButton(
width: 130,
effect: true,
text: "FButton #2",
textColor: Colors.white,
color: Color(0xffFFA726),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner(
leftBottomCorner: 40,
leftTopCorner: 6,
rightTopCorner: 40,
rightBottomCorner: 6,
),
),
...
通过 FButton 可以十分便捷的构建一个有 圆角,有 边框 的按钮元素。
🌈 渐变色
// #1
FButton(
width: 100,
height: 60,
text: "#1",
textColor: Colors.white,
color: Color(0xffFFc900),
gradient: LinearGradient(colors: [
Color(0xff00B0FF),
Color(0xffFFc900),
]),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(8),
)
通过 gradient
属性,可以构建带有渐变色的 FButton 你可以自由构建多种类型的渐变色。
使用 FButton,你可以 既要,也要,还要
😄
🍭 图标
// #1
FButton(
width: 88,
height: 38,
padding: EdgeInsets.all(0),
text: "Back",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
toast(context, "Back!");
},
clickEffect: true,
corner:
FButtonCorner(
leftTopCorner: 25,
leftBottomCorner: 25,),
image: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 12,
),
imageMargin: 8,
),
// #3
FButton(
onPressed: () {},
image: Icon(
Icons.print,
color: Colors.grey,
),
imageMargin: 8,
imageAlignment: ImageAlignment.top,
text: "Print",
textColor: Colors.grey,
color: Colors.transparent,
),
FButton 允许配置相对于文字的图标,足够灵活,和简单。
💫 特效
FButton(
width: 200,
effect: true,
text: "Try Me!",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(9),
splashColor: Color(0xffff7043),
highlightColor: Color(0xffE65100).withOpacity(0.20),
hoverColor: Colors.redAccent.withOpacity(0.16),
),
不论是普通 Old 式按钮或是有特效的交互按钮,你只需掌握 FButton 就够了。
阴影
FButton(
width: 200,
effect: true,
text: "Shadow",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(28),
shadowColor: Colors.black87,
shadowBlur: _shadowBlur,
),
FButton 当然会为你提供快捷的阴影属性。
🔆 Loading
// #1
FButton(
effect: true,
text: "Click top loading",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
print("Loading...");
},
clickEffect: true,
corner: FButtonCorner.all(9),
loadingSize: 15,
imageMargin: 6,
loadingStrokeWidth: 2,
clickLoading: true,
loadingColor: Colors.white,
loadingText: "Loading...",
imageAlignment: ImageAlignment.top,
),
// #2
FButton(
width: 170,
height: 70,
effect: true,
text: "Click to loading",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
print("Loading...");
},
clickEffect: true,
corner: FButtonCorner.all(9),
image: Icon(
Icons.cloud_download,
size: 18,
color: Colors.white,
),
imageMargin: 8,
loadingSize: 15,
loadingStrokeWidth: 2,
clickLoading: true,
loadingColor: Colors.white,
loadingText: "Loading...",
hideTextOnLoading: true,
),
FButton 集成了 Loading 功能,这真是..太棒了 🎉。
🧩 FSwitch
可用状态 & 阴影
FSwitch(
onChanged: (bool value) {
value_1 = value;
},
open: value_1,
enable: enable_1,
shadowColor: Colors.black.withOpacity(0.5),
shadowBlur: 3.0,
),
FSwitch 提供了可用状态配置的基础能力,同时能够支持十分便捷的阴影配置。
🌝 提示
/// #1
FSwitch(
width: 65.0,
height: 35.538,
onChanged: (v) {},
closeChild: Text(
"Off",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
openChild: Text(
"On",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
),
...
在 FSwitch 中,你可以分别为打开/关闭状态配置不同的提示样式,而且他们实现起来很简单。
👀 Slider 装饰
FSwitch(
width: 300,
height: 38,
onChanged: (bool value) {},
sliderChild: Text(
"😃",
style: TextStyle(fontSize: 20),
),
)
一个有趣的 FSwitch 当然会为你准备有趣的配置选项。
😃 如何使用?
在项目 pubspec.yaml
文件中添加依赖:
🌐 pub 依赖方式
- FButton
dependencies:
fbutton: ^<版本号>
⚠️ 注意,请到 pub 获取 FButton 最新版本号
- FSwitch
dependencies:
fswitch: ^<版本号>
⚠️ 注意,请到 pub 获取 FSwitch 最新版本号
🖥 git 依赖方式
- FButton
dependencies:
fbutton:
git:
url: 'git@github.com:Fliggy-Android-Team/fbutton.git'
ref: '<分支号 或 tag>'
⚠️ 注意,分支号 或 tag 请以 FButton 官方项目为准。
- FSwitch
dependencies:
fswitch:
git:
url: 'git@github.com:Fliggy-Android-Team/fswitch.git'
ref: '<分支号 或 tag>'
⚠️ 注意,分支号 或 tag 请以 FSwitch 官方项目为准。
感觉 《FButton》 还不错?到 《FButton》的 Github 主页投出您认可的一个 Star 🌟 吧!
感觉《FSwitch》还不错?到 《FSwitch》的 Github 主页投出您认可的一个 Star 🌟 吧!
今天的文章为精美,FButton&FSwitch分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/19293.html