一、简单介绍
Cline 插件
插件简介
Cline 插件简介
Cline Github 项目: IDE 中的自主编码代理
Cline 是一个智能编码助手插件，支持使用大模型在开发中自动完成各种任务。-
Cline 特性
-
使用任何 API 和模型
- 支持各大主流大模型和 API。
-
终端命令执行
- Cline 可以直接在终端中执行命令并接收输出，从安装软件包、运行构建脚本到部署应用程序、管理数据库和执行测试，全面适应您的开发环境。
-
文件创建与编辑
- 支持创建和编辑文件，监控 Linter/编译器错误（如缺少导入、语法错误等），自动修复问题。
-
添加上下文
-
@url：粘贴扩展程序要获取的 URL 并转换为 Markdown，便于提供最新文档。 -
@problems：添加工作区的错误和警告以供修复。 -
@file：添加文件内容，避免 API 请求读取文件。 -
@folder：一次性添加文件夹的所有文件，加快工作流程。
-
-
检查点
- 比较和恢复不同代码状态，追踪变更。
-
使用任何 API 和模型
Deepseek-v3 国产大模型
官网
Deepseek 官网
Deepseek 是杭州深度求索人工智能有限公司推出的国产大模型。Deepseek-v3 优势
DeepSeek-V3 在推理速度上有大幅提升，并在开源模型主流榜单中表现优异，与最先进的闭源模型接近。
| 模型 | Code 测试分数 |
|---|---|
| DeepSeek-V3 | 82.6 |
| DeepSeek-V2.5 | 77.4 |
| Qwen2.5 | 77.3 |
| Llama3.1 | 77.2 |
| Claude-3.5 | 81.7 |
| GPT-4o | 80.5 |
二、演示步骤
-
注册账号
- 通过手机号注册账号，并新建 API Key（默认赠送 500 万 tokens）。
-
下载安装 VS Code
- 下载 VS Code IDE 开发工具：点击下载。
-
安装 Cline 插件
- 安装 Cline 插件，选择 Deepseek-v3 模型，绑定 API Key。
-
创建空项目
- 新建一个空项目（演示使用 Flutter）。
-
输入描述并运行
- 在 Cline 中输入编程描述，点击运行即可自动开发项目（包括自动检测环境、代码编写、报错修复和运行）。
三、演示案例
案例 1
通过 Flutter 实现图文列表，支持顶部下拉刷新和滚动到底部自动加载下一页数据，并运行 Demo。
案例 2
通过 Flutter 实现图文列表，功能包括：
- 支持顶部下拉刷新和滚动到底部自动加载下一页数据。
- 数据通过 Dio 库模拟网络请求获取列表数据。
- 点击列表行跳转到图文详情页。
- 详情页包括标题、图片和链接。
最后运行 Demo。
实现代码，如下：
main.dart
import 'package:flutter/material.dart';
import 'image_list.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image List Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ImageList(),
);
}
}
image_list.dart
import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:dio/dio.dart';
import 'image_detail.dart';
class ImageList extends StatefulWidget {
const ImageList({super.key});
@override
State<ImageList> createState() => _ImageListState();
}
class _ImageListState extends State<ImageList> {
final RefreshController _refreshController = RefreshController();
final Dio _dio = Dio();
final List<Map<String, dynamic>> _items = [];
int _page = 0;
@override
void initState() {
super.initState();
_loadMore();
}
void _onRefresh() async {
_page = 0;
_items.clear();
await _loadMore();
_refreshController.refreshCompleted();
}
void _onLoading() async {
await _loadMore();
_refreshController.loadComplete();
}
Future<void> _loadMore() async {
try {
final response = await _dio.get(
'https://picsum.photos/v2/list',
queryParameters: {
'page': _page,
'limit': 10,
},
);
final newItems = (response.data as List).map((item) {
return {
'id': item['id'],
'title': 'Photo by ${item['author']}',
'imageUrl': item['download_url'],
'link': item['url'],
};
}).toList();
setState(() {
_items.addAll(newItems);
_page++;
});
} catch (e) {
_refreshController.loadFailed();
debugPrint('Error loading images: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Image List Demo'),
),
body: SmartRefresher(
controller: _refreshController,
enablePullDown: true,
enablePullUp: true,
onRefresh: _onRefresh,
onLoading: _onLoading,
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
leading: SizedBox(
width: 50,
height: 50,
child: CachedNetworkImage(
imageUrl: _items[index]['imageUrl'] ?? '',
placeholder: (context, url) => const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
fit: BoxFit.cover,
),
),
title: Text(_items[index]['title'] ?? ''),
subtitle: Text('Photo by ${_items[index]['title']}'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageDetail(
//imageUrl: _items[index]['imageUrl'] ?? '',
imageUrl: _items[index]['imageUrl'] ?? '',
title: _items[index]['title'] ?? '',
link: _items[index]['link'] ?? '',
),
),
);
},
);
},
),
),
);
}
}
image_detail.dart
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class ImageDetail extends StatelessWidget {
final String title;
final String imageUrl;
final String link;
const ImageDetail({
super.key,
required this.title,
required this.imageUrl,
required this.link,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: SingleChildScrollView(
child: Column(
children: [
CachedNetworkImage(
imageUrl: imageUrl,
placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) => const Icon(Icons.error),
fit: BoxFit.cover,
width: double.infinity,
height: 300,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
title,
style: Theme.of(context).textTheme.headlineSmall,
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: TextButton(
onPressed: () {
// TODO: Open link
},
child: const Text('View Full Article'),
),
),
],
),
),
);
}
}
pubspec.yaml
name: flutter_demo_1
description: "A new Flutter project."
publish_to: 'none'
version: 0.1.0
environment:
sdk: ^3.6.0
dependencies:
flutter:
sdk: flutter
pull_to_refresh: ^2.0.0
http: ^1.1.0
cached_network_image: ^3.3.0
dio: ^5.4.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^5.0.0
flutter:
uses-material-design: true
Simulator Screenshot - iPhone Xs - 2025-02-06 at 15.59.38.png
