趁手利器，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個、..，你大可爲所欲爲。

僅需兩個屬性 corner、cornerStyle，就能構建各類千奇百怪的邊角效果。

🖼 邊框

簡單一點，再簡單一點。

爲 FSuper 添加邊框，足夠簡單。

只需 strokeColor 和 strokeWidth 屬性搭配，便可當即得到使人滿意的邊框裝飾效果。即便是再加上邊角效果，一樣也足夠簡單。

📝 富文本

渾然天成，一步到位。

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: " !"),
  ],
),
複製代碼

FSuper 將 Flutter 所提供的富文本支持進行了精巧的融合，使得在兼具 FSuper 所提供的一切能力的前提下，不用引入新的組件，而可以支持富文本。這真是太棒了👏！

🧡 漸變效果

色彩夠多，纔夠出彩。

經過 gradient 屬性，你能夠直接爲 FSuper 直接配置 LinearGradient、RadialGradient、SweepGradient 等多種漸變色背景效果。

FSuper 在削減層級嵌套上，始終是一把利器。

🔳 陰影

要多立體，都行！

FSuper 經過簡單的 shadowColor 和 shadowBlur 屬性便可控制組件陰影的顏色、大小。

代碼雖然的簡單，可是立體效果絕對不簡單。

🎈 小紅點

內藏玄機，妙趣橫生。

FSuper 可以讓小紅點在你的應用中大放異彩。關於小紅點位置肯定的相關計算，由 FSuper 完成。你只須要關注你須要什麼就夠了。

這是顯而易見的改變，今後構建小紅點不在話下。

🧸 相對位置佈局

再複雜，也簡單。

FSuper 支持配置多達兩個子組件 child1 和 child2，你能夠經過相對位置描述來定位它們。這讓不少不易構建的效果，變的簡單清晰。

FSuper 可以聰明的肯定自身內容區域大小，進一步根據你對子控件的相對位置配置，肯定它們相對於內容區域的位置。這能解決不少問題。

特別是當你沒法知道內容區域大小，而子控件又須要上居中對齊，或其它一些對齊方式時，你須要額外建立不少組件來嵌套，以構建出這種相對位置的效果。有時，你甚至不得不須要對繪製進行監聽，以便在拿到主要尺寸後，進一步肯定位置關係。

FSuper 可以阻止這些問題出如今你的面前，一切都將變的足夠簡單。

在不使用 FSuper 狀況下，組織圖中 【Warning】視圖是比較困難的。除了須要額外增長組件嵌套，你很難在內容區域大小不肯定的狀況下來肯定諸如 centerLeft、centerRight、.. 等對齊效果。更不用說須要對齊的全部組件的大小都不肯定的狀況了。

但 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 🌟 吧！