04. 移动端实战 (上)：UI 构建
课时信息
📅 时间：10:40 - 11:25 🎯 目标：使用 AI 快速构建高颜值 App 界面
1. 项目立项：AI Daily (每日一图)
我们要做一个极简主义的 App：
- 每天展示一张高质量图片。
- 配一句 AI 生成的心灵鸡汤/代码格言。
- 支持下载和分享。
2. 第一轮 Prompt：整体骨架
在 Cursor/Trae 中输入：
"用 Flutter 写一个叫
DailyPage的 Widget。 这是一个全屏设计：
- 背景是一张网络图片 (
https://picsum.photos/800/1200)，覆盖整个屏幕 (BoxFit.cover)。- 页面底部有一个半透明黑色的遮罩层。
- 遮罩层里放两行文字：日期（左上角），鸡汤文（白色粗体）。
- 右下角放一个“刷新”浮动按钮 (
FloatingActionButton)。"
Vibecoding 技巧： 不要一开始就抠细节。先让 AI 给你一个“能跑”的骨架。
3. 第二轮 Prompt：美化细节 (Polishing)
"目前的文字看不清。 请帮我优化样式：
- 给底部遮罩层加一个从下到上的渐变色 (黑色到透明)，高度占屏幕的 1/3。
- 鸡汤文用
GoogleFonts.lato字体，白色，字号 24，加一点阴影。- 刷新按钮改成半透明玻璃质感 (Glassmorphism)。"
4. 关键代码解析 (AI 生的)
虽然我们不手写，但你要认识两个关键 Widget：
Stack: 实现了背景图和文字的叠加。Container+Gradient: 实现了底部的渐变遮罩。
任务
在午饭前，你的模拟器上应该显示出一张漂亮的图片和一行文字。