TDesign Flutter 组件库上手指南在 Flutter 项目里 60 秒跑通第一个组件 Demo【免费下载链接】tdesign-flutter项目地址: https://gitcode.com/gh_mirrors/tdes/tdesign-flutter TDesign Flutter 是腾讯开源的 Flutter 移动端 UI 组件库内置按钮、表单、导航、弹窗等 28 个 TDesign 设计风格的现成组件主题系统支持整体换肤最适合想用 Flutter 做 App 并快速统一界面风格的项目。它解决什么问题自己写 Flutter 页面按钮、输入框、弹窗全得从零拼色值随手定两三个页面下来风格就不统一了。TDesign Flutter 的做法是把移动端常用组件提前封装好颜色、圆角、字号、阴影全部收进主题文件通过 TDTheme.of(context) 统一取值改一处全局生效。核心能力速览28 个即用组件TDButton、TDInput、TDDialog、TDNavBar、TDSideBar、TDPicker、TDToast 都在 组件源码目录 里拿来即用不用自己写样式。主题一站定制品牌色、字号、圆角、阴影、间距全部走主题配置改一次主题整个 App 的观感跟着变。内置 TDesign 图标字体图标打包成 ttf直接 Icon(TDIcons.xxx) 调用仓库里还带图标矢量源文件可自己重新生成替换。开箱即跑的示例应用每个组件在 example/lib/page/ 下都有演示页示例工程还支持构建 Web 版代码可直接抄走看效果。适合用在哪些地方电商与工具类 App商品列表、搜索、数量调整这类场景TDSearch、TDInput、TDStepper、TDTag 都能直接组合。企业内部门户侧边菜单 顶部导航的常见布局TDSideBar、TDNavBar、TDBottomTabBar 齐了。通用反馈交互弹窗、轻提示、加载态直接调 TDDialog、TDToast、TDLoading不用自己写遮罩和动画。iOS / Android 双端同一套组件代码两端运行交互和视觉保持一致。60秒上手体验 ⚡拉取源码git clone https://gitcode.com/gh_mirrors/tdes/tdesign-flutter打开tdesign-component/example目录flutter pub get后直接运行示例 App首页就是全部组件的 demo 列表。接入自己项目时把依赖写进 pubspec.yamlREADME 给了 git 与私有 pub 两种方式当前版本 0.0.3文件头import package:tdesign_flutter/tdesign_flutter.dart即可使用。挑一个演示页比如 td_button_page.dart抄改比啃文档更快建立手感。新手实用建议先看 demo 再写代码示例页面目录 里每个组件都有可运行页面想怎么用先跑一遍看效果。组件文档有固定位置tdesign-site/src/ 下每个组件都有自己的 README.md如 button/README.mdAPI 表格就是从这里生成的。注意版本与命名要求 Dart 2.18.0 3.0.0、Flutter 3.3.0本地 Flutter 过新先查兼容性组件统一用 TD 前缀命名如果你用过 TDesign 小程序版或 Vue 版API 命名基本对齐迁移成本低。做 Flutter 移动端项目、又想快速把风格做统一TDesign Flutter 值得花一个下午试试。想动手的话直接git clone https://gitcode.com/gh_mirrors/tdes/tdesign-flutter打开示例 App 开始逛。【免费下载链接】tdesign-flutter项目地址: https://gitcode.com/gh_mirrors/tdes/tdesign-flutter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考