我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.ai/?utm_source...
在上一篇文章中已经完成项目基础框架的搭建，在这一篇文章中通过不断调教AI，实现自己的APP页面。
实现目标
今天的目标是利用Trae完成一下页面的开发工作。
实战操作
设计图生成代码
1、第一步告诉Trae我们的需求是什么?
在昨天项目基础上，在ProfilePage文件中实现设计图中的效果
2、第二步，运行项目到模拟器，查看运行结果，这里我直接让Trae以Debug模式启动程序，方便后续代码修改查看效果
这一步和上一篇文章中的一样，一堆环境检测之后，运行程序到模拟器上面。
查看Trae生成的代码运行效果和设计图之间还是存在比较大的差异的，如图：
下一步就是详细一步一步调教AI修改代码了。
通过看图对比需要调整的问题如下：
1、通知和设置处不符合
2、每行的条目是圆角，部分字体大小不符合
3、数据统计处缺失
4、头部二维码图标位置不对
5、顶部标题栏也不符合
细节调整
1、调整页面背景色和圆角信息等
2、调整通知和设置栏目处的设计
3、付费功能栏目微调
4、头部视图的调整
5、数据统计处调整
5、图标调整
6、导航栏调整
经过上述一系列的调整之后，查看设计图与模拟器中运行效果，基本一致了。如图所示：
Ai完成后的代码
dart
import 'package:flutter/material.dart';
class ProfilePage extends StatelessWidget {
const ProfilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFFF7F7F7),
),
backgroundColor: const Color(0xFFF7F7F7),
body: ListView(
children: [
_buildHeader(),
_buildStats(),
_buildMenuItem('关注我的人(1)', Icons.people_outline, trailing: const Icon(Icons.chevron_right, color: Colors.grey)),
_buildMenuItem('付费功能收入', Icons.monetization_on_outlined, trailing: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text('去开通', style: TextStyle(fontSize: 14, color: Color(0xFF999999))),
SizedBox(width: 4),
Icon(Icons.chevron_right, color: Colors.grey),
],
)),
_buildMenuItem('传图片到素材库', Icons.image_outlined),
const SizedBox(height: 8),
Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
_buildMenuItem('通知', Icons.notifications_outlined, margin: EdgeInsets.zero),
const Divider(height: 1, indent: 16, endIndent: 16, thickness: 0.5, color: Color(0xFFEEEEEE)),
_buildMenuItem('设置', Icons.settings_outlined, showDot: true, margin: EdgeInsets.zero),
],
),
),
],
),
);
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
margin: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
decoration: const BoxDecoration(
color: Color(0xFFF7F7F7),
),
child: Row(
children: [
CircleAvatar(
radius: 32,
backgroundColor: Colors.grey[200],
child: const Icon(Icons.person_outline, size: 40, color: Colors.grey),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'use AI小民工',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
),
const SizedBox(height: 6),
const Text(
'微信号：gh_79788deba2e6',
style: TextStyle(fontSize: 15, color: Color(0xFF666666)),
),
],
),
),
Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFF666666), width: 0.5),
borderRadius: BorderRadius.circular(2),
),
child: const Icon(Icons.qr_code, size: 12, color: Color(0xFF666666)),
),
const SizedBox(width: 4),
const Icon(Icons.chevron_right, color: Colors.grey),
],
),
);
}
Widget _buildStats() {
return Container(
padding: const EdgeInsets.all(16),
margin: const EdgeInsets.only(bottom: 8, left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text(
'数据统计',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
const SizedBox(width: 8),
Text(
'更新至2025/02/19',
style: TextStyle(fontSize: 12, color: Colors.grey[600]),
),
const Spacer(),
const Icon(Icons.chevron_right, color: Colors.grey),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'6',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
const SizedBox(height: 4),
Text(
'昨日阅读',
style: TextStyle(fontSize: 12, color: Colors.grey[600]),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'0',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
const SizedBox(height: 4),
Text(
'昨日分享',
style: TextStyle(fontSize: 12, color: Colors.grey[600]),
),
],
),
),
],
),
],
),
);
}
Widget _buildMenuItem(String title, IconData icon, {Widget? trailing, bool showDot = false, EdgeInsetsGeometry? margin}) {
return Container(
margin: margin ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
decoration: margin == null ? BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
) : null,
child: ListTile(
title: Text(
title,
style: const TextStyle(fontSize: 16),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (showDot) Container(
width: 6,
height: 6,
margin: const EdgeInsets.only(right: 4),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
),
trailing ?? const Icon(Icons.chevron_right, color: Colors.grey),
],
),
),
);
}
}总结
通过以上操作之后，完成了一个静态页面的开发工作，期间最重要的是和AI沟通，告诉它你想要什么讲清楚，上下文环境越清楚越好，生成的页面微调还是比较耗时的，如何懂一些基础开发，和AI配合会大大提升效率的。
在上一篇文章中已经完成项目基础框架的搭建，在这一篇文章中通过不断调教AI，实现自己的APP页面。