Flutter社交列表管理插件keeplist_social的使用

Flutter社交列表管理插件keeplist_social的使用

keeplist_social 是一个跨平台的库，用于验证、清理和标准化社交网络个人资料链接和标识符。它支持 TypeScript/JavaScript 和 Dart/Flutter。

项目来源

该项目受到 social-links 的启发，并由 Grzegorz Kućmierz 开发。我们扩展了它以支持多个平台，并计划进一步发展。

开发过程中得到了 Cursor 的协助，使用了 Claude-3.5-20241022。

当前版本说明

这是一个最小可行产品（MVP）版本。未来计划用 Rust 重写该库，通过 WebAssembly 提供跨语言兼容性，实现单一数据源，支持多种语言绑定，并减少维护成本。

功能

keeplist_social 解决了与社交网络链接相关的几个常见问题：

  1. URL 验证：检查 URL 是否为有效的社交网络个人资料链接。
  2. 个人资料 ID 提取：从各种 URL 格式中提取唯一的标识符。
  3. URL 标准化：将不同的 URL 格式转换为规范形式。
  4. 跨平台支持：在网页和移动环境中均可使用。

支持的平台

支持 25+ 社交平台，包括但不限于：

  • 主流社交网络（如 Twitter/X、Facebook、Instagram、LinkedIn）
  • 专业平台（如 GitHub、StackOverflow）
  • 媒体平台（如 YouTube、Spotify、Apple Podcasts）
  • 消息平台（如 Discord、Telegram、WhatsApp）

支持的 URL 格式

  • 不同协议（http、https）
  • 带/不带 www 前缀
  • 移动设备 URL（如 m.example.com）
  • 国家特定域名
  • 带/不带尾随斜杠
  • 查询参数（可选）

使用方法

TypeScript/JavaScript 使用示例

import { SocialLinks } from 'keeplist-social';

const social = await SocialLinks.create();

// 验证 URL 是否有效
console.log(social.isValid('twitter', 'https://x.com/username'));  // 输出: true
console.log(social.isValid('twitter', 'not-a-url'));  // 输出: false

// 提取个人资料 ID
console.log(social.getProfileId('github', 'https://github.com/username'));  // 输出: 'username'

// 标准化 URL
console.log(social.sanitize('linkedin', 'www.linkedin.com/in/username'));
// 输出: 'https://linkedin.com/in/username'

Dart/Flutter 使用示例

import 'package:social/social.dart';

void main() async {
  final social = await SocialLinks.create();

  // 验证 URL 是否有效
  print(social.isValid('twitter', 'https://x.com/username'));  // 输出: true

  // 提取个人资料 ID
  print(social.getProfileId('github', 'https://github.com/username'));  // 输出: 'username'

  // 标准化 URL
  print(social.sanitize('linkedin', 'www.linkedin.com/in/username'));
  // 输出: 'https://linkedin.com/in/username'
}

配置选项

可以在初始化时传入配置选项：

const social = await SocialLinks.create({
  trimInput: true,              // 去除输入中的空白字符
  filterForQueryParams: false,  // 允许或移除查询参数
});

添加新平台

平台定义存储在 /patterns 文件夹下的 JSON 模式文件中：

{
  "name": "platform_name",
  "matches": [
    {
      "match": "(https?://)?([\\w.]*\\.)?platform\\.com/({PROFILE_ID})/?",
      "group": 3,
      "pattern": "https://platform.com/{PROFILE_ID}"
    }
  ]
}

开发步骤

  1. 安装依赖：

    # 对于 TypeScript
npm install

# 对于 Dart
flutter pub get

  2. 运行测试：

    # TypeScript
npm test

# Dart
flutter test

发布

NPM 包发布

  1. 更新 ts/package.json 中的版本号。
  2. 构建包：
    cd ts
npm run build
  3. 发布到 NPM：
    npm publish

Dart/Flutter 包发布

  1. 更新 dart/pubspec.yaml 中的版本号。
  2. 运行测试：
    cd dart
flutter test
  3. 发布到 pub.dev：
    flutter pub publish

安装

NPM 安装

npm install keeplist-social

Dart/Flutter 安装

在 pubspec.yaml 中添加以下内容：

dependencies:
  keeplist_social: ^1.0.0

然后运行：

flutter pub get

更多关于Flutter社交列表管理插件keeplist_social的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter社交列表管理插件keeplist_social的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


keeplist_social 是一个用于 Flutter 的社交列表管理插件，它可以帮助你轻松地管理和展示社交列表，例如好友列表、关注列表、粉丝列表等。以下是关于如何使用 keeplist_social 插件的基本指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 keeplist_social 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  keeplist_social: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 keeplist_social 插件：

import 'package:keeplist_social/keeplist_social.dart';

3. 使用 KeeplistSocial 组件

KeeplistSocial 是一个可以显示社交列表的小部件。你可以通过传递一个用户列表来初始化它。

class SocialListScreen extends StatelessWidget {
  final List<User> users = [
    User(id: '1', name: 'Alice', avatarUrl: 'https://example.com/avatar1.jpg'),
    User(id: '2', name: 'Bob', avatarUrl: 'https://example.com/avatar2.jpg'),
    // 添加更多用户
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social List'),
      ),
      body: KeeplistSocial(
        users: users,
        onUserTap: (user) {
          // 处理用户点击事件
          print('User tapped: ${user.name}');
        },
      ),
    );
  }
}

4. 自定义 KeeplistSocial

KeeplistSocial 提供了多种自定义选项，例如：

  • itemBuilder: 自定义每个用户的显示方式。
  • separatorBuilder: 自定义用户之间的分隔符。
  • emptyView: 当列表为空时显示的视图。
KeeplistSocial(
  users: users,
  itemBuilder: (context, user) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(user.avatarUrl),
      ),
      title: Text(user.name),
      trailing: Icon(Icons.arrow_forward),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
  emptyView: Center(
    child: Text('No users found'),
  ),
);

5. 处理用户交互

你可以通过 onUserTap 回调来处理用户的点击事件：

KeeplistSocial(
  users: users,
  onUserTap: (user) {
    // 导航到用户详情页面或其他操作
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => UserDetailScreen(user: user),
      ),
    );
  },
);

6. 高级功能

keeplist_social 还支持分页加载、搜索、排序等高级功能。你可以通过查阅插件的官方文档来了解更多细节。

7. 运行应用

确保你的应用已经配置好网络权限（如果需要从网络加载头像等资源），然后运行你的 Flutter 应用：

flutter run
回到顶部