代码片段库是开发者日常工作中的重要工具，能够帮助快速复用常用代码模板。本文将详细介绍如何在Flutter for OpenHarmony应用中实现一个功能丰富的代码片段管理系统。

页面结构设计

代码片段库页面需要支持分类筛选和代码展示功能：

class CodeSnippetsPage extends StatefulWidget {
  @override
  _CodeSnippetsPageState createState() => _CodeSnippetsPageState();
}

class _CodeSnippetsPageState extends State<CodeSnippetsPage> {
  List<CodeSnippet> snippets = [
    CodeSnippet(
      title: 'Flutter StatelessWidget模板',
      language: 'Dart',
      code: '''class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}''',
      description: 'Flutter无状态组件模板',
      tags: ['Flutter', 'Widget', 'Template'],
    ),

页面状态类包含代码片段列表，每个片段都有标题、语言、代码内容、描述和标签等完整信息。

代码片段数据模型

代码片段涵盖多种编程语言和使用场景：

CodeSnippet(
  title: 'HTTP请求封装',
  language: 'JavaScript',
  code: '''async function apiRequest(url, options = {}) {
  try {
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    });
    return await response.json();
  } catch (error) {
    console.error('API请求失败:', error);
    throw error;
  }
}''',
  description: 'JavaScript HTTP请求封装函数',
  tags: ['JavaScript', 'HTTP', 'API'],
),

每个代码片段都包含实际可用的代码，而不是占位符。这些代码经过验证，可以直接在项目中使用。

语言筛选功能

页面顶部提供编程语言筛选功能：

String selectedLanguage = '全部';
final List<String> languages = ['全部', 'Dart', 'JavaScript', 'Python', 'Java', 'Swift'];

@override
Widget build(BuildContext context) {
  final filteredSnippets = selectedLanguage == '全部' 
    ? snippets 
    : snippets.where((s) => s.language == selectedLanguage).toList();

  return Scaffold(
    appBar: AppBar(
      title: const Text('代码片段库'),
      backgroundColor: Theme.of(context).primaryColor,
      foregroundColor: Colors.white,
      actions: [
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: _addSnippet,
        ),
      ],
    ),

筛选逻辑根据选中的语言过滤代码片段列表，"全部"选项显示所有片段。应用栏包含添加新片段的按钮。

筛选器界面设计

语言筛选器使用水平滚动的芯片组实现：

body: Column(
  children: [
    // 语言筛选
    Container(
      height: 60.h,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: languages.length,
        itemBuilder: (context, index) {
          final language = languages[index];
          final isSelected = selectedLanguage == language;
          return Container(
            margin: EdgeInsets.only(right: 8.w, top: 8.h, bottom: 8.h),
            child: FilterChip(
              label: Text(language),
              selected: isSelected,
              onSelected: (selected) {
                setState(() {
                  selectedLanguage = language;
                });
              },
              backgroundColor: Colors.grey[200],
              selectedColor: Theme.of(context).primaryColor.withOpacity(0.2),
            ),
          );
        },
      ),
    ),

筛选器使用FilterChip组件，选中状态使用主题色高亮显示。水平滚动确保在小屏幕上也能显示所有选项。

代码片段列表展示

主要内容区域使用可展开的列表项展示代码片段：

// 代码片段列表
Expanded(
  child: ListView.builder(
    padding: EdgeInsets.all(16.w),
    itemCount: filteredSnippets.length,
    itemBuilder: (context, index) {
      final snippet = filteredSnippets[index];
      return Card(
        margin: EdgeInsets.only(bottom: 16.h),
        child: ExpansionTile(
          title: Text(
            snippet.title,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 16.sp,
            ),
          ),

列表使用ExpansionTile组件，允许用户点击展开查看代码内容。这种设计节省屏幕空间，同时提供完整的信息展示。

片段信息展示

每个片段的基本信息显示在标题区域：

subtitle: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    SizedBox(height: 4.h),
    Text(
      snippet.description,
      style: TextStyle(
        fontSize: 14.sp,
        color: Colors.grey[600],
      ),
    ),
    SizedBox(height: 8.h),
    Row(
      children: [
        Container(
          padding: EdgeInsets.symmetric(
            horizontal: 8.w,
            vertical: 4.h,
          ),
          decoration: BoxDecoration(
            color: _getLanguageColor(snippet.language).withOpacity(0.2),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            snippet.language,
            style: TextStyle(
              fontSize: 12.sp,
              color: _getLanguageColor(snippet.language),
            ),
          ),
        ),

基本信息包括描述、编程语言标签和相关标签。语言标签使用对应的主题色，提供视觉识别。

标签展示

代码片段的标签帮助用户理解其用途和特点：

SizedBox(width: 8.w),
...snippet.tags.take(2).map((tag) => Container(
  margin: EdgeInsets.only(right: 4.w),
  padding: EdgeInsets.symmetric(
    horizontal: 6.w,
    vertical: 2.h,
  ),
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(4),
  ),
  child: Text(
    tag,
    style: TextStyle(
      fontSize: 10.sp,
      color: Colors.grey[700],
    ),
  ),
)),

标签使用小尺寸的胶囊形状容器，最多显示2个标签避免界面拥挤。标签采用统一的灰色主题。

代码内容展示

展开区域显示完整的代码内容：

children: [
  Container(
    width: double.infinity,
    margin: EdgeInsets.all(16.w),
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.grey[100],
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.grey[300]!),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Expanded(
              child: Text(
                '代码',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 14.sp,
                ),
              ),
            ),
            IconButton(
              onPressed: () => _copyCode(snippet.code),
              icon: const Icon(Icons.copy),
              tooltip: '复制代码',
            ),
          ],
        ),

代码区域使用浅灰色背景和边框，顶部包含标题和复制按钮。复制按钮提供快速复制功能。

代码文本展示

代码内容使用等宽字体显示，确保格式正确：

SizedBox(height: 8.h),
SelectableText(
  snippet.code,
  style: TextStyle(
    fontFamily: 'monospace',
    fontSize: 12.sp,
  ),
),

使用SelectableText组件允许用户选择和复制代码的特定部分。等宽字体确保代码的对齐和可读性。

语言颜色映射

不同编程语言使用不同颜色进行视觉区分：

Color _getLanguageColor(String language) {
  switch (language.toLowerCase()) {
    case 'dart':
      return Colors.blue;
    case 'javascript':
      return Colors.yellow[700]!;
    case 'python':
      return Colors.green;
    case 'java':
      return Colors.orange;
    case 'swift':
      return Colors.orange[800]!;
    default:
      return Colors.grey;
  }
}

颜色选择参考各编程语言的官方色彩或社区约定，提高用户的识别度和一致性。

代码复制功能

复制功能让用户可以快速将代码复制到剪贴板：

void _copyCode(String code) {
  Clipboard.setData(ClipboardData(text: code));
  Get.snackbar(
    '已复制',
    '代码已复制到剪贴板',
    snackPosition: SnackPosition.BOTTOM,
  );
}

复制完成后显示确认提示，让用户知道操作已成功执行。使用底部提示避免干扰用户操作。

添加片段功能

页面提供添加新代码片段的功能入口：

void _addSnippet() {
  // TODO: 实现添加代码片段功能
  Get.snackbar(
    '提示',
    '添加代码片段功能开发中...',
    snackPosition: SnackPosition.BOTTOM,
  );
}

实际应用中可以打开代码片段编辑对话框，允许用户输入标题、选择语言、输入代码和添加标签。

搜索功能扩展

可以添加搜索功能让用户快速找到需要的代码片段：

// 搜索功能示例
List<CodeSnippet> _searchSnippets(String query) {
  if (query.isEmpty) return snippets;
  return snippets.where((snippet) =>
    snippet.title.toLowerCase().contains(query.toLowerCase()) ||
    snippet.description.toLowerCase().contains(query.toLowerCase()) ||
    snippet.tags.any((tag) => tag.toLowerCase().contains(query.toLowerCase()))
  ).toList();
}

搜索支持按标题、描述和标签进行模糊匹配，提供灵活的查找方式。

分类管理功能

可以扩展分类管理功能，让用户自定义代码片段分类：

// 分类管理示例
Map<String, List<CodeSnippet>> _groupByCategory() {
  Map<String, List<CodeSnippet>> grouped = {};
  for (var snippet in snippets) {
    String category = snippet.tags.isNotEmpty ? snippet.tags.first : '未分类';
    grouped.putIfAbsent(category, () => []).add(snippet);
  }
  return grouped;
}

分类功能帮助用户更好地组织和管理大量的代码片段。

导入导出功能

可以添加导入导出功能，支持代码片段的备份和分享：

// 导出功能示例
String _exportSnippets() {
  return jsonEncode(snippets.map((s) => s.toJson()).toList());
}

// 导入功能示例
void _importSnippets(String jsonData) {
  List<dynamic> data = jsonDecode(jsonData);
  List<CodeSnippet> imported = data.map((item) => CodeSnippet.fromJson(item)).toList();
  setState(() {
    snippets.addAll(imported);
  });
}

导入导出功能使用JSON格式，便于数据的存储和传输。

总结

通过以上实现，我们创建了一个功能完整的代码片段库，支持多语言筛选、代码展示、复制功能等。界面设计注重用户体验，通过展开式列表节省空间，通过颜色编码提高识别度。在Flutter for OpenHarmony平台上，这样的代码管理工具能够显著提升开发者的工作效率。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net