Flutter联系人管理界面插件contactkit_ui的使用

提供联系人功能实现（包含UI）

声明依赖项

如需添加 ContactKitUI 的依赖项，您必须将 pub 库添加到项目中。

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  contactkit_ui: ^1.0.0

安装依赖项

完成上述步骤后，在项目的根目录下运行以下命令以安装依赖项：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 contactkit_ui 插件来实现联系人管理界面。

示例代码

import 'package:flutter/material.dart';
import 'package:contactkit_ui/contactkit_ui.dart'; // 导入 ContactKitUI

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ContactManagerPage(), // 设置主页为联系人管理页面
    );
  }
}

class ContactManagerPage extends StatefulWidget {
  [@override](/user/override)
  _ContactManagerPageState createState() => _ContactManagerPageState();
}

class _ContactManagerPageState extends State<ContactManagerPage> {
  List<Map<String, dynamic>> contacts = []; // 存储联系人数据

  [@override](/user/override)
  void initState() {
    super.initState();
    fetchContacts(); // 初始化时获取联系人数据
  }

  // 模拟获取联系人数据
  Future<void> fetchContacts() async {
    // 这里可以替换为实际的联系人数据源
    setState(() {
      contacts = [
        {"name": "张三", "phone": "1234567890"},
        {"name": "李四", "phone": "0987654321"},
        {"name": "王五", "phone": "1122334455"},
      ];
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("联系人管理"), // 设置标题
      ),
      body: ListView.builder( // 使用 ListView 显示联系人列表
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(child: Text(contacts[index]['name'][0])), // 显示头像
            title: Text(contacts[index]['name']), // 显示姓名
            subtitle: Text(contacts[index]['phone']), // 显示电话号码
            onTap: () {
              Navigator.push( // 点击联系人跳转到详细页面
                context,
                MaterialPageRoute(
                  builder: (context) => ContactDetailPage(contact: contacts[index]),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton( // 添加联系人按钮
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddContactPage(),
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

// 联系人详细页面
class ContactDetailPage extends StatelessWidget {
  final Map<String, dynamic> contact;

  ContactDetailPage({required this.contact});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("联系人详情"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("姓名: ${contact['name']}"),
            Text("电话: ${contact['phone']}"),
          ],
        ),
      ),
    );
  }
}

// 添加联系人页面
class AddContactPage extends StatelessWidget {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController phoneController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("添加联系人"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: "姓名"),
            ),
            TextField(
              controller: phoneController,
              decoration: InputDecoration(labelText: "电话"),
            ),
            ElevatedButton(
              onPressed: () {
                // 模拟保存联系人数据
                Navigator.pop(context);
              },
              child: Text("保存"),
            ),
          ],
        ),
      ),
    );
  }
}