Flutter 打造微信通訊錄界面，豐富指示器和索引条的滚动效果

2024-01-11 15:43:35

前言

在上一篇文章中，我們已經完成了微信通訊錄界面的基本布局和功能。本篇將繼續深入探討如何使用 Flutter 構建一個具有豐富指示器和索引條的通訊錄界面，增強用戶體驗並提升視覺效果。

指示器

指示器是通訊錄中必不可少的組件，它可以幫助用戶快速定位到想要查找的聯繫人。在 Flutter 中，可以使用 ListTile 來實現指示器。

ListTile(
  leading: CircleAvatar(
    backgroundImage: AssetImage('assets/images/avatar.png'),
  ),
  title: Text('John Doe'),
  subtitle: Text('Software Engineer'),
  trailing: Icon(Icons.chevron_right),
);

在這個範例中，ListTile 包含了聯繫人的頭像、姓名、職位和一個右箭頭圖示。

索引條

索引條是另一個通訊錄中常見的組件，它可以幫助用戶快速定位到聯繫人姓氏的首字母。在 Flutter 中，可以使用 CupertinoScrollbar 來實現索引條。

CupertinoScrollbar(
  child: ListView.builder(
    itemCount: contacts.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/images/avatar.png'),
        ),
        title: Text(contacts[index].name),
        subtitle: Text(contacts[index].jobTitle),
        trailing: Icon(Icons.chevron_right),
      );
    },
  ),
);

在這個範例中，CupertinoScrollbar 包含了一個 ListView，裡面包含了所有的聯繫人。ListView 的 itemBuilder 函數會根據聯繫人的數量生成相應數量的 ListTile。

滾動效果

為了增強用戶體驗，可以為指示器和索引條添加滾動效果。在 Flutter 中，可以使用 ScrollController 來實現滾動效果。

final ScrollController _scrollController = ScrollController();

ListView.builder(
  controller: _scrollController,
  itemCount: contacts.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: AssetImage('assets/images/avatar.png'),
      ),
      title: Text(contacts[index].name),
      subtitle: Text(contacts[index].jobTitle),
      trailing: Icon(Icons.chevron_right),
    );
  },
);

在這個範例中，ListView 的 controller 屬性被設置為了 _scrollController。這意味著當用戶滾動 ListView 時，_scrollController 也可以捕獲到滾動事件。

客製化視覺效果

除了上述基本功能之外，還可以通過自定義樣式來增強指示器和索引條的視覺效果。例如，可以更改指示器和索引條的顏色、形狀、大小等。

ListTile(
  leading: CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text(contacts[index].name[0], style: TextStyle(color: Colors.white)),
  ),
  title: Text(contacts[index].name),
  subtitle: Text(contacts[index].jobTitle),
  trailing: Icon(Icons.chevron_right),
);

CupertinoScrollbar(
  child: ListView.builder(
    itemCount: contacts.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.blue,
          child: Text(contacts[index].name[0], style: TextStyle(color: Colors.white)),
        ),
        title: Text(contacts[index].name),
        subtitle: Text(contacts[index].jobTitle),
        trailing: Icon(Icons.chevron_right),
      );
    },
  ),
  backgroundColor: Colors.grey,
);