Flutter 中使用字母索引联动通讯录列表

2023-11-03 16:25:56

构建一个强大的 Flutter 通讯录列表：使用 JSON 数据、字母索引和高效列表视图

引言

在现代社会，通讯录应用程序已经成为我们日常生活不可或缺的一部分。它们使我们能够轻松便捷地管理和查找联系人的信息，包括姓名、电话号码和电子邮件地址。对于移动应用程序开发人员来说，构建一个美观实用、性能卓越的通讯录列表至关重要。在这篇文章中，我们将深入探讨如何使用 Flutter 框架和 JSON 数据来创建这样一个列表。

JSON 数据处理

我们的通讯录应用程序将使用 JSON（JavaScript Object Notation）文件来存储联系人的详细信息。JSON 是一种轻量级的、基于文本的数据格式，非常适合在客户端和服务器之间传输数据。

首先，我们需要从远程服务器或本地文件系统加载 JSON 数据。我们可以使用 Flutter 的 http 包来执行此操作。

import 'package:http/http.dart' as http;

Future<dynamic> fetchContacts() async {
  final response = await http.get(Uri.parse('https://example.com/contacts.json'));
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load contacts');
  }
}

创建字母索引

为了方便用户快速查找联系人，我们将创建一个字母索引。此索引将包含应用程序中可用的所有字母，当用户点击某个字母时，列表将滚动到以该字母开头的第一个联系人。

class AlphabetIndex extends StatelessWidget {
  final List<String> alphabet;
  final Function(String) onLetterSelected;

  const AlphabetIndex({
    Key? key,
    required this.alphabet,
    required this.onLetterSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: alphabet.map((letter) => _buildLetterTile(letter)).toList(),
    );
  }

  Widget _buildLetterTile(String letter) {
    return GestureDetector(
      onTap: () => onLetterSelected(letter),
      child: Container(
        height: 24,
        width: 24,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey.shade200,
        ),
        child: Text(letter),
      ),
    );
  }
}

构建通讯录列表

现在我们有了字母索引，是时候构建通讯录列表本身了。列表将显示联系人的详细信息，包括姓名、电话号码和电子邮件地址。

class ContactList extends StatelessWidget {
  final List<Contact> contacts;
  final Function(String) onLetterSelected;

  const ContactList({
    Key? key,
    required this.contacts,
    required this.onLetterSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: contacts.length,
      itemBuilder: (context, index) {
        return _buildContactTile(contacts[index]);
      },
    );
  }

  Widget _buildContactTile(Contact contact) {
    return ListTile(
      title: Text(contact.name),
      subtitle: Text('${contact.phoneNumber} | ${contact.email}'),
    );
  }
}

集成字母索引和通讯录列表

最后，我们需要将字母索引和通讯录列表集成到一个流畅的用户界面中。当用户点击字母索引中的某个字母时，列表应滚动到以该字母开头的第一个联系人。

class ContactScreen extends StatefulWidget {
  const ContactScreen({Key? key}) : super(key: key);

  @override
  State<ContactScreen> createState() => _ContactScreenState();
}

class _ContactScreenState extends State<ContactScreen> {
  late Future<dynamic> contacts;
  late List<String> alphabet;

  @override
  void initState() {
    super.initState();
    contacts = fetchContacts();
    alphabet = List.generate(26, (index) => String.fromCharCode(index + 65));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contacts')),
      body: FutureBuilder(
        future: contacts,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Row(
              children: [
                AlphabetIndex(
                  alphabet: alphabet,
                  onLetterSelected: (letter) => _scrollToLetter(letter),
                ),
                Expanded(
                  child: ContactList(
                    contacts: snapshot.data as List<Contact>,
                    onLetterSelected: (letter) => _scrollToLetter(letter),
                  ),
                ),
              ],
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading contacts'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

  void _scrollToLetter(String letter) {
    for (int i = 0; i < contacts.data.length; i++) {
      if (contacts.data[i].name.startsWith(letter)) {
        setState(() {
          Scrollable.ensureVisible(
            context: context,
            child: ContactList(contacts: contacts.data, onLetterSelected: (letter) => _scrollToLetter(letter))[i],
          );
        });
        break;
      }
    }
  }
}