我們畫原型的時候會經常使用設定好的組件提高工作效率，但之前只有很少的選擇，要么就是自己做?，F在，騰訊設計的TDesignFlutter設計體系也公開了，方便我們快速開發桌面端、移動端以及小程序等多個版本的應用程序，為產品體驗設計帶來新的思路。

作為一款誕生于騰訊內部開源、經過超 500 項內部業務檢驗的企業級設計體系，TDesign 匯集了騰訊眾多優秀組件庫能力和設計研發經驗。之前，TDesign 已經支持 Vue2、Vue Next、React 等業界主流技術棧，方便使用者快速開發桌面端、移動端以及小程序等多個版本的應用程序，從而更好地服務設計師和開發者，助力企業提升設計研發效能，為產品體驗設計帶來新的思路。

Flutter 跨平臺框架自 2018 年開源以來，迅速發展，擁有大量用戶。Flutter 采用自繪引擎，可以在不同平臺上實現高性能、流暢的用戶界面，用戶體驗出色。此外，Flutter 的跨平臺特性使開發者只需編寫一次代碼，即可在多個平臺上運行，減少開發和維護成本。Flutter 以其高效的開發流程、卓越的性能和跨平臺能力，成為跨平臺應用開發的首選框架。

TDesignFlutter 不但擁有 Flutter 流暢的跨平臺開發體驗，而且擁有 TDesign 美觀一致的設計資源。二者結合，開發者可以直接使用 TDesign 的組件構建 Flutter 應用，加快開發速度的同時，也確保了應用程序的一致性。在騰訊內部，TDesignFlutter 已支持多個產品線上穩定運行。

一、組件概覽

TDesignFlutter 已上線 Text、Button、Input 等 29 個基礎組件。詳情可查閱：https://tdesign.tencent.com/flutter/overview

此外，Collapse (折疊面板)、Upload (上傳工具) 等組件已在開發測試中，相信很快可以和大家見面。

二、常用組件

1. Text

支持系統 Text 所有屬性，可無縫切換。中文居中處理，并將常用屬性扁平化，使用更加方便。

2. Button

豐富的主題樣式，統一的設計規范。

3. icon

內容豐富的圖標，使用 ttf 格式，簡單易用，避免失真。

4. 復雜組件

完善的功能，統一的交互，易用的封裝。

三、快速上手

1. 簡單使用

• 在 pubbspec.yaml 引入依賴。

 dependencies:
   tdesign_flutter: ^0.1.0

• 在文件頭部引入：import ‘package:tdesign_flutter/tdesign_flutter.dart’;
• 然后就可以使用 TDesignFlutter 的組件了:

  TDText('測試文本'),
  TDButton(text: '演示按鈕'`, theme: TDButtonTheme.primary,`),
  Icon(TDIcons.add_circle)

2. 自定義主題

TDesignFlutter 提供自定義主題的能力，可通過 json 文件配置顏色 / 字體尺寸 / 字體樣式 / 圓角 / 陰影等主題樣式。通過 TDTheme.of (context) 或者 TDTheme.defaultData () 獲取主題數據。

 TDTheme.of(context).brandNormalColor
 TDTheme.defaultData().fontBodyLarge

使用示例：

下列代碼不設置特殊主題，使用 TDesingFlutter 默認主題：

TDText(
  '測試文本',
 textColor: TDTheme.of(context).brandNormalColor,
 font: TDTheme.of(context).fontBodyMedium,
),
const TDButton(
 text: '演示按鈕',
 theme: TDButtonTheme.primary,
)

設置自定主題如下：

MaterialApp(
 theme: ThemeData(
 extensions: [TDThemeData.fromJson('test', testThemeConfig)!],
  )
 ……
)

String testThemeConfig = '''
  {
    "test": {
        "color": {
            "brandNormalColor": "#D7B386"
        },
        "font": {
            "fontBodyMedium": {
                "size": 40,
                "lineHeight": 55
            }
        }
    }
}
  ''';

四、適用場景

• 如果你是一個全新的業務，想要快速構建美觀一致的 FlutterAPP。 √
• 如果你使用 Flutter 系統組件構建了 APP，想要一款簡單易用、可快速遷移的組件庫提升開發效率。 √
• 如果你想客戶端和 web 端使用風格統一的組件，或者后續需要支持 pc 桌面端應用。 √

五、后續規劃

• 提供更多可靠實用的組件
• 適配 Flutter Web 和 PC 桌面端，支持更多應用場景
• 提供更完善的單元測試模塊和性能檢測能力，確保組件更可靠和流暢

六、反饋和共建

TDesignFlutter 現已開放，歡迎廣大設計師和開發者使用和反饋，參與共建通用企業級設計體系。

官網：https://tdesign.tencent.com/flutter

項目地址：https://github.com/Tencent/tdesign-flutter