69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
# Flutter Runner VS Code 扩展设计
|
||
|
||
## 概述
|
||
|
||
创建一个轻量级 VS Code 扩展，在侧边栏提供 Flutter 命令快捷按钮面板。
|
||
|
||
## 功能需求
|
||
|
||
### 按钮列表
|
||
|
||
| 按钮 | 命令 | 说明 |
|
||
|------|------|------|
|
||
| ▶️ Run | `flutter run` | 运行项目 |
|
||
| 🧹 Clean | `flutter clean` | 清理构建缓存 |
|
||
| 📦 Pub Get | `flutter pub get` | 获取依赖 |
|
||
| 🔨 Build | `flutter build <platform>` | 构建发布包 |
|
||
|
||
### Build 平台选择
|
||
|
||
点击 Build 按钮后，弹出快速选择：
|
||
- APK (Android)
|
||
- IPA (iOS)
|
||
- Web
|
||
- Windows
|
||
- macOS
|
||
- Linux
|
||
|
||
## 技术设计
|
||
|
||
### 文件结构
|
||
|
||
```
|
||
flutter-runner/
|
||
├── package.json # 扩展清单
|
||
├── extension.js # 主逻辑
|
||
└── README.md # 使用说明
|
||
```
|
||
|
||
### 核心实现
|
||
|
||
1. **命令注册**：使用 `vscode.commands.registerCommand()`
|
||
2. **终端管理**：使用 `vscode.window.createTerminal()` 创建/复用终端
|
||
3. **视图提供者**：使用 TreeView 提供按钮列表
|
||
4. **平台选择**：使用 `vscode.window.showQuickPick()` 弹出选择
|
||
|
||
### 命令执行逻辑
|
||
|
||
```javascript
|
||
function runCommand(cmd) {
|
||
const terminal = vscode.window.activeTerminal ||
|
||
vscode.window.createTerminal('Flutter');
|
||
terminal.show();
|
||
terminal.sendText(cmd);
|
||
}
|
||
```
|
||
|
||
## 界面设计
|
||
|
||
- 侧边栏视图名称：Flutter Runner
|
||
- 按钮样式：图标 + 文字，垂直排列
|
||
- 点击反馈：按钮高亮，终端自动弹出
|
||
|
||
## 成功标准
|
||
|
||
1. 扩展可正常安装和激活
|
||
2. 侧边栏显示 Flutter Runner 面板
|
||
3. 点击按钮在终端执行对应命令
|
||
4. Build 按钮支持平台选择
|