为精美，FButton & FSwitch

code小生 一个专注大前端领域的技术平台 公众号回复 Android 加入安卓技术群

作者：CoorChice

链接：https://juejin.im/post/5ea15e566fb9a03c880f6200

声明：本文已获 CoorChice 授权发表，转发等请联系原作者授权

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

嘿，开发者，快停止构建 Old GUI ！

如果你有注意到的话，你会发现，我们需要更多的精美的 New GUI ！

为帮助开发者能够舒适的构建出拥有精美 GUI 的现代应用程序， 阿里巴巴-飞猪-Fliggy Android Team 技术团队 （https://github.com/Fliggy-Android-Team）推出了 FWidgets 系列组件。

就在前几天，我们开放了 FWidgets 的第一个组件 https://github.com/Fliggy-Android-Team/fsuper ，获得了社区开发者们良好的反馈，目前该组件已经获得了来自开发者们投出的 214 个 Star 。

现在，我将为你介绍 FButton (https://github.com/Fliggy-Android-Team/fbutton) 和 FSwitch (https://github.com/Fliggy-Android-Team/fswitch)。

FButton能够帮助你构建丰富多彩的按钮元素，而 FSwitch 将为你提供拥有良好交互的开关元素。

特性

FButton

• 丰富的 边角 效果

• 精美的 边框 装饰

• 渐变效果也不在话下

• 灵活的 图标 支持

• 贴心的 Loading 模式

• 炫酷的交互 特效

• 更具空间感的 阴影

FSwitch

• 支持打开、关闭的提示

• 支持为 Slider 设置装饰

• 支持灵活的配置可用状态

• 更具空间感的 阴影

• 良好的开关交互体验

传送区

FButton Github 主页

https://github.com/Fliggy-Android-Team/fbutton

FButton Documentation

https://pub.dev/documentation/fbutton/latest/fbutton/fbutton-library.html

FSwitch Github 主页

https://github.com/Fliggy-Android-Team/fswitch

FSwitch Documentation

https://pub.dev/documentation/fswitch/latest/fswitch/fswitch-library.html

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 ，你可以 既要，也要，还要

:lollipop: 图标

// #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当然会为你提供快捷的阴影属性。

:high_brightness: 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提供了可用状态配置的基础能力，同时能够支持十分便捷的阴影配置。

:full_moon_with_face: 提示

/// #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 文件中添加依赖：

:globe_with_meridians: pub 依赖方式

• FButton

dependencies:
  fbutton: ^<版本号>

️ 注意，请到 pub (https://pub.dev/packages/fbutton) 获取 FButton 最新版本号

• FSwitch

dependencies:
  fswitch: ^<版本号>

️ 注意，请到 pub (https://pub.dev/packages/fswitch) 获取 FSwitch 最新版本号

git 依赖方式

• FButton

dependencies:
  fbutton:
    git:
      url: '[email protected]:Fliggy-Android-Team/fbutton.git'
      ref: '<分支号 或 tag>'

️ 注意，分支号 或 tag 请以 https://github.com/Fliggy-Android-Team/fbutton 官方项目为准。

• FSwitch

dependencies:
  fswitch:
    git:
      url: '[email protected]:Fliggy-Android-Team/fswitch.git'
      ref: '<分支号 或 tag>'

️ 注意，分支号 或 tag 请以 https://github.com/Fliggy-Android-Team/fswitch 官方项目为准。

感觉 《FButton》 还不错？到 《FButton》的 Github 主页投出您认可的一个 Star  吧！

https://github.com/Fliggy-Android-Team/fbutton

感觉《FSwitch》还不错？到 《FSwitch》的 Github 主页投出您认可的一个 Star  吧！

https://github.com/Fliggy-Android-Team/fswitch