如何在Flutter应用中实现LinkedIn式技能多选字段？求推荐技能API

实现方案 #

LinkedIn技能多选的核心是带实时搜索过滤的可选择标签系统，支持输入时筛选选项、选中后以标签展示、可删除已选标签，以下两种方案可快速落地：

方案1：使用第三方包快速实现 #

推荐multi_select_flutter或flutter_tagging，这两个包原生支持搜索过滤、多选、标签展示，无需大量自定义：

1. 先在pubspec.yaml添加依赖：

dependencies:
  multi_select_flutter: ^4.1.0

2. 核心代码示例：

import 'package:multi_select_flutter/multi_select_flutter.dart';

// 技能数据模型（对应API返回结构）
class Skill {
  final String id;
  final String name;

  Skill(this.id, this.name);

  @override
  String toString() => name;
}

// 页面中嵌入多选组件
MultiSelectDialogField<Skill>(
  items: skillsList.map((skill) => MultiSelectItem(skill, skill.name)).toList(),
  listType: MultiSelectListType.CHIP,
  onConfirm: (selectedSkills) {
    // 处理选中的技能列表
    print(selectedSkills);
  },
  chipDisplay: MultiSelectChipDisplay(
    onTap: (skill) {
      // 点击已选标签触发删除
      setState(() => selectedSkills.remove(skill));
    },
  ),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey.shade300),
    borderRadius: BorderRadius.circular(4),
  ),
  searchable: true,
)

方案2：自定义实现（完全贴合LinkedIn风格） #

如果需要更定制化的UI，可结合TextField+ListView+Wrap组件手动实现：

List<Skill> allSkills = []; // 从API获取的全量技能列表
List<Skill> selectedSkills = [];
List<Skill> filteredSkills = [];
final _searchController = TextEditingController();

@override
void initState() {
  super.initState();
  filteredSkills = allSkills;
  // 监听输入实时过滤技能
  _searchController.addListener(() {
    setState(() {
      filteredSkills = allSkills.where((skill) => 
        skill.name.toLowerCase().contains(_searchController.text.toLowerCase())
      ).toList();
    });
  });
}

// 构建UI
Column(
  children: [
    // 已选技能标签展示
    Wrap(
      spacing: 8,
      runSpacing: 8,
      children: selectedSkills.map((skill) => Chip(
        label: Text(skill.name),
        onDeleted: () => setState(() => selectedSkills.remove(skill)),
      )).toList(),
    ),
    // 搜索输入框
    TextField(
      controller: _searchController,
      decoration: const InputDecoration(
        hintText: "添加技能",
        border: OutlineInputBorder(),
      ),
    ),
    // 过滤后的技能选项列表
    Expanded(
      child: ListView.builder(
        itemCount: filteredSkills.length,
        itemBuilder: (context, index) {
          final skill = filteredSkills[index];
          return ListTile(
            title: Text(skill.name),
            onTap: () {
              setState(() {
                if (!selectedSkills.contains(skill)) {
                  selectedSkills.add(skill);
                  _searchController.clear();
                }
              });
            },
          );
        },
      ),
    ),
  ],
)

公开技能数据API/数据源推荐 #

如果找不到现成的技能列表API，可尝试以下途径：

• DBpedia SPARQL查询：DBpedia收录了大量职业技能相关结构化数据，可通过SPARQL语句按需查询，例如获取编程技能列表的语句：

SELECT ?skill ?skillLabel WHERE {
  ?skill dbo:wikiPageWikiLink dbr:Programming_language .
  SERVICE wikibase:label { bd:serviceParam wikibase:language "en,zh" }
}

直接通过SPARQL端点发起请求即可获取JSON格式数据。

• O*NET数据集：美国劳工部的O*NET数据库提供全面的职业技能、知识、能力等数据，可下载数据集后自行搭建简易API，或直接解析本地JSON/CSV文件使用。
• 自定义静态技能列表：整理常见技能（编程、设计、管理等）生成JSON文件，嵌入应用或部署到静态托管服务作为简易API调用。

内容的提问来源于stack exchange，提问作者Nitin Jain