开源公告 ： TDesignFlutter-百搭易用的跨平台UI组件库


项目简介

TDesign是一款诞生于腾讯内部、经过超500项内部业务检验的企业级设计体系，汇集了腾讯众多优秀组件库能力和设计研发经验。之前，TDesign已经支持 Vue2、Vue Next、React 等业界主流技术栈，方便使用者快速开发桌面端、移动端以及小程序等多个版本的应用程序。

作为TDesign设计体系的Flutter实现，TDesignFlutter不但拥有Flutter流畅的跨平台开发体验，而且拥有TDesign美观一致的设计资源。二者结合，开发者可以直接使用TDesign的组件构建Flutter应用，加快开发速度的同时，也确保了应用程序的一致性。

TDesignFlutter已上线Text、Button、Input等29个基础组件，支持4个基础主题属性。在腾讯内部，TDesignFlutter已支持多个产品线上稳定运行。

TDesignFlutter在组件的实现过程中，尽量保留系统组件的能力，并进行功能扩展，使其更强大更易用的同时，尽量降低项目迁移成本。因此，TDesignFlutter可以适用下列场景：

● 如果你是一个全新的业务，想要快速构建美观一致的FlutterAPP。 √

● 如果你使用Flutter系统组件构建了APP，想要一款简单易用、可快速迁移的组件库提升开发效率。 √

● 如果你想客户端和Web端使用风格统一的组件，或者后续需要支持PC桌面端应用。  √

此外，Collapse(折叠面板)、Upload(上传工具)等组件已在开发测试中，相信很快可以和大家见面。



诞生背景

随着互联网的快速发展，产品规模和功能日益增加，开发场景变得更加复杂，传统的设计研发模式已经不足以支撑业务的高速扩张。

腾讯推出的 TDesign 针对这一痛点研发，内含丰富可复用的设计组件资源，如色彩体系、文字系统、动效设计等，覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件。用户可以按照需求查看对应组件的使用教程和代码演示，只需简单的引入操作，即可搭建属于自己的产品界面。而且TDesign支持 Vue2、Vue Next、React 等业界主流技术栈，让用户无需担心技术栈的问题，可以开箱即用。自2021年TDesign开源后，收获了不错的口碑与反响。

Flutter作为Google开源的跨平台框架，以其高效的开发流程、卓越的性能和跨平台能力，成为目前跨平台应用开发的首选框架。而它的跨平台特性，与TDesign多端可复用的理念极为调性相合。许多用户反馈，希望TDesign能够支持Flutter，以便在移动应用开发中使用TDesign的设计原则和规范。

因此，我们决定开源TDesignFlutter，为开发者提供一套一致、美观且易于使用的UI组件库。通过将TDesign的设计原则与Flutter的跨平台能力相结合，开发者可以更高效地构建出精美的移动应用程序。



特性优势

TDesignFlutter结合了TDesign和Flutter二者的优势，具体如下：

一致的多端体验：

Flutter可以通过一套代码库，构建精美的、原生平台编译的多平台应用，高效整合开发资源。而且结合TDesign前端技术栈，可以所有产品保持统一的设计风格，加深用户印象，提高用户粘度。

良好的工具兼容：

TDesignFlutter与Flutter生态系统中的其他插件和工具兼容性良好，可以轻松地集成第三方插件，扩展应用程序的功能。TDesign覆盖支持Axure、Sketch、Figma、Adobe XD 等各大产品设计软件，可以帮助开发者和设计师拥有更好的开发设计体验。

详尽的文档示例：

Flutter和TDesign都在官网提供了详尽的介绍文档和示例代码，可以轻松上手，快速开发。而且Flutter和TDesign都拥有活跃的社区环境，开发者可以在其中交流、提问和分享经验，获得支持和帮助。

百搭的设计风格：

TDesign拥有轻量简洁的 UI风格，百搭适配各种产品项目。而且TDesignFlutter提供了自定义主题的能力，可以支持用户替换自己喜欢的颜色、字体等，更适配自身的业务场景。

丰富的组件资源：

TDesignFlutter已上线Text、Button、Input等29个基础组件，内置244个ttf类型的常用Icon,拥有丰富的主题样式，统一的交互体验。Text组件支持系统Text所有属性，可无缝切换，增加中文居中处理，并将常用属性扁平化，使用更加方便。



开源规划

● 提供更多可靠实用的组件

● 适配Flutter Web和PC桌面端,支持更多应用场景

● 提供更完善的单元测试模块和性能检测能力，确保组件更可靠和流畅



项目地址

官网地址：

https://tdesign.tencent.com/flutter

Github 地址：

https://github.com/Tencent/tdesign-flutter

欢迎广大设计师和开发者参与，共建通用企业级设计体系。

请给项目 一个 Star !

欢迎提出你的 issue 和 PR！

关注腾讯开源公众号

获取更多最新腾讯官方开源信息！

4e621c0f6ea9b9d99ac9886ac1faa72e.png