03. UI 框架选型：站在巨人的肩膀上

课时信息

📅 时间：9:50 - 10:35 🎯 目标：了解主流 UI 组件库，决定 App 的“长相”

1. 为什么要选 UI 框架？

手写每一个按钮、每一个输入框是非常低效的。现代开发都是基于 组件库 (UI Library) 搭建积木。 选对框架，颜值和效率直接翻倍。

2. Flutter 主流流派

2.1 官方原生派 (Native)

• Material Design 3 (Google):

  • 特点: 默认自带，功能最全，兼容性最好。Android 风格浓厚，但在 iOS 上也会自动适配部分交互。
  • 适用: 90% 的通用 App，快速原型开发。
  • 指令: "请使用 Flutter 原生 Material 3 组件..."

• Cupertino (iOS 风格):

  • 特点: 完美复刻 iOS 系统组件（如滚轮选择器、iOS 风格导航栏）。
  • 适用: 专门针对 iPhone 用户群体的 App。

2.2 企业级第三方派

• TDesign (腾讯):

  • 特点: 微信/腾讯系产品的标准设计语言。克制、简洁、包容。
  • 适用: 想做“微信风”的小程序或 App，或者 B 端工具类应用。
  • 配置: 需要在 pubspec.yaml 引入 tdesign_flutter。

• Vant / Ant Design Mobile:

  • 源自 Web 端的优秀设计，也有 Flutter 移植版。

3. 小程序主流流派

• WeUI: 微信官方出品，同微信原生样式一致。
• TDesign: 腾讯新一代企业级设计体系，组件更丰富，颜值更高。
• Vant Weapp: 有赞出品，电商类小程序首选。

4. 如何指挥 AI 使用框架？

AI 默认会使用原生组件。如果你想用 TDesign，必须显式告诉它。

❌ 泛泛的指令

"帮我写个漂亮的表单。"

✅ 指定框架的指令

"Context: 我们正在使用 TDesign 组件库开发。 Task: 请用 TDInput 和 TDButton 实现一个登录表单。 Style: 保持 TDesign 的默认间距和圆角风格。"

选型建议

对于初学者和本次课程，建议使用 Material Design 3 (Flutter) 或 WeUI (小程序)，因为它们开箱即用，无需额外配置环境。