亚洲精品中文字幕久久久久下载 ,久久久久久久精品一区二区三区

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

騰訊 TDesignFlutter 組件庫開源啦??????

騰訊設計

2023-12-07

4 評論 7158 瀏覽 19 收藏

8 分鐘

我們畫原型的時候會經常使用設定好的組件提高工作效率，但之前只有很少的選擇，要么就是自己做。現在，騰訊設計的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
            }
        }
    }
}
  ''';