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

2023-12-09 14:37:55 浏览数 (2)

项目简介

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!

关注腾讯开源公众号

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

0 人点赞