可视化设计器：通过拖放构建界面

可视化设计器是 Pocket Code 中最强大的功能之一。它让你能够以可视化的方式创建用户界面，并自动生成简洁、可用于生产环境的代码。

为什么要用可视化设计器？

在手机屏幕上设计 UI 颇具挑战。在小屏幕上手动编写布局代码既缓慢又容易出错。可视化设计器通过直观的拖放界面解决了这个问题。

优势

• 快速： 几分钟即可完成设计，而非几小时
• 可视化： 实时查看效果
• 简洁代码： 生成遵循最佳实践的代码
• 多框架： React、Flutter、原生 Android

入门

打开设计器

1. 在任意项目中，点击标签栏中的 Design 图标
2. 选择框架（React、Flutter、XML）
3. 从空白画布开始，或选择一个模板

基本界面

设计器分为以下几部分：

• 组件面板（左侧）—— 可拖动的元素
• 画布（中央）—— 你的设计区域
• 属性（右侧）—— 自定义所选元素

可用组件

布局

组件	说明
Container	弹性容器
Row	水平排列元素
Column	垂直排列元素
Grid	CSS Grid 布局
Stack	重叠元素
Scroll	可滚动区域

输入

组件	说明
Button	带多种样式的按钮
TextInput	文本输入框
Toggle	开/关切换开关
Slider	数值选择器
Dropdown	下拉菜单
Checkbox	复选框
RadioGroup	单选选项

显示

组件	说明
Text	带样式的文本
Image	图片/图标
Card	信息卡片
List	动态列表
Badge	通知徽标
Avatar	头像图片
Divider	视觉分隔线

导航

组件	说明
NavBar	顶部导航栏
TabBar	标签页导航
Drawer	侧边菜单
BottomNav	底部导航
Breadcrumb	层级导航

实战教程：登录界面

让我们一步步创建一个完整的登录界面：

第 1 步：基本结构

将一个 Column 拖到画布上并配置：

• 对齐方式：居中
• 内边距：24px
• 背景：#0a0a0a

第 2 步：添加 Logo

在该列内部，拖入一个 Image：

• 尺寸：120x120
• 圆角：full（圆形）
• 下外边距：32px

第 3 步：文本输入框

添加两个 TextInput 组件：

邮箱：

• 占位符："Email"
• 类型：email
• 图标：mail
• 宽度：100%

密码：

• 占位符："Password"
• 类型：password
• 图标：lock
• 宽度：100%

第 4 步：登录按钮

拖入一个 Button：

• 文本："Log In"
• 样式：primary
• 宽度：100%
• 圆角：12px

第 5 步：附加链接

添加 Text 组件用于：

• "Forgot your password?"（链接样式）
• "Don't have an account? Sign up"（淡色文本 + 链接）

生成的代码

设计器会自动生成简洁的代码：

// React output
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

// Flutter output
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF0A0A0A),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 60,
                backgroundImage: AssetImage('assets/logo.png'),
              ),
              SizedBox(height: 32),
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail),
                ),
              ),
              SizedBox(height: 16),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  hintText: 'Password',
                  prefixIcon: Icon(Icons.lock),
                ),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: Text('Log In'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 48),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

高级功能

响应式设计

设计器会自动处理响应式：

• 自动布局： 元素根据屏幕尺寸自动调整
• 断点： 为手机/平板定义不同的排版方式
• 相对单位： 使用 %、rem 和 flex，而非固定像素

数据绑定

将组件连接到数据：

1. 选择一个组件（例如一个 List）
2. 在属性中，点击 Bind Data
3. 选择数据源（API、本地状态、mock 数据）
4. 将字段映射到组件属性

可复用模板

将你的设计保存为模板：

• 自定义组件： 将组合保存为单个组件
• 设计系统： 定义颜色、排版和间距
• 界面模板： 与团队共享完整的布局

手势支持

设计器专为触摸交互而设计：

• 在画布上双指缩放
• 双击以选择嵌套元素
• 长按调出上下文菜单
• 滑动在面板之间切换

支持的框架

框架	状态	代码质量
React/JSX	✅ 稳定	出色
Flutter	✅ 稳定	出色
Android XML	✅ 稳定	非常好
SwiftUI	🔄 测试版	良好
Vue	📋 计划中	—

技巧与最佳实践

1. 从结构开始： 先放置容器，再放置内容
2. 使用自动布局： 尽可能避免固定尺寸
3. 为组件命名： 生成更易读的代码
4. 经常预览： 在不同屏幕尺寸上检查
5. 增量导出： 不要等到最后才检查代码

接下来

• Figma 导入： 直接从 Figma 导入设计
• 协作模式： 团队实时协同设计
• AI 设计器： 用自然语言描述 UI，让 AI 来构建
• 动画编辑器： 以可视化方式添加过渡和动画

---

可视化设计器使 Pocket Code 成为唯一一款可以在同一台设备上既能设计又能编程的移动 IDE。今天就来试试，加速你的开发吧！